常用tab选项卡代码

Posted 2020-10-01 壁虎漫步.

<div class="box">
    <ul>
        <li class="one">课程介绍</li>
        <li>报名流程</li>
        <li>常见问题</li>
    </ul>
    <div class="content">
        <div class="ct">随着移动互联网的兴起，互联网行业正向更加智能化的Web3.0时代迈进，中国互联网行业进入了高速发展的势态，php语言已经为大部分企业广泛应用和重视 </div>
        <div class="ct">在jQuery迅速发展的同时，一些大的厂商也看中了商机。2009年9月，微软和诺基亚公司正式宣布支持开源的jQuery库，另外，微软公司还宣称他们将把jQuery作为Visual Studio工具集的一部分。 </div>
        <div class="ct">2010年1月，也是jQuery的四周年生日，jQuery 1.4版发布，为了庆祝jQuery四周岁生日，jQuery团队特别创建了jquery14.com站点，带来了连续14天的新版本专题介绍。 </div>
    </div>
</div>

 * {
    padding:0;
    margin:0;
}
body {
    font-size:12px;
    padding:100px;
}
ul {
    list-style-type:none;
}
.box ul {
    height:30px;
    line-height:30px;
}
.box ul li {
    float:left;
    padding:0 10px;
    position:relative;
    cursor:pointer;
    border:1px solid #000;
    margin-right:5px;
    border-bottom:none;
}
.box ul li.two {
    background:orange;
}
.content {
    width:325px;
    border:1px solid #000;
    padding:10px;
    height:100px;
}
* html .content {
    margin-top:-1px;
}
.box ul li.one {
    background:#fff;
}

$(document).ready(function() {
    $(‘.ct:gt(0)‘).hide();
    var hdw = $(‘.box ul li‘);
    hdw.hover(function() {
        $(this).addClass(‘two‘).siblings().removeClass(‘two‘);
    });
    hdw.click(function() {
        $(this).addClass(‘one‘).siblings().removeClass();
        var hdw_index = hdw.index(this);
        $(‘.ct‘).eq(hdw.index(this)).show().siblings().hide();
    });
});