zoukankan      html  css  js  c++  java
  • jquery +点击按钮,切换div内容,按钮加高亮

    html:

    <div class="dw4">
    <span class="dw">单位(次)</span>
    <div class="time4">
    <div class="dat day active4">a</div>
    <div class="dat month">b</div>
    </div>
    </div>

    <div class="tabinners4">
    <div class="inner4">
        我是第一个内容哦
    </div>

    <div class="inner4">
    我是第二个内容呀

    </div>

    </div>

    css:

    .dw4{
    position: relative;
    }
    .time4{
    position: absolute;
    right:6px;
    top:2px;
    }
    .time4 .dat{
    55px;
    height: 20px;
    display: inline-block;
    /* float: right; */
    color: #fff;
    font-size: 12px;
    background: url(../image/l4.png) no-repeat;
    padding-left: 11px;
    padding-top: 1px;
    cursor: pointer;
    }

    .dw4 .active4{

    background: url(../image/h4.png) no-repeat;
    cursor: pointer;
    55px;
    }
    .tabinners4 .inner4:first-child{
    display: block;
    }

    .inner4{
    370px;
    height: 209px;
    background: url(../image/kuang4aa.png) no-repeat;
    position: relative;
    display: none;
    margin-top: 12px;
    }

    js:

    $(".time4 .dat").click(function(){
    $(this).addClass('active4').siblings().removeClass('active4');
    var index=$(this).index();
    $(".tabinners4 .inner4").eq(index).show().siblings().hide();
    })

  • 相关阅读:
    css
    ubuntu 解压zip 文件乱码
    常用 Git 命令清单
    phpstorm git配置
    github ssh秘钥配置
    ubuntu 安装phpunit
    ubuntu 安装php xdebug
    nginx压缩,缓存
    mysql中max_allowed_packet参数的配置方法(避免大数据写入或者更新失败)
    putty登录显示IP
  • 原文地址:https://www.cnblogs.com/snowbxb/p/11513121.html
Copyright © 2011-2022 走看看