选项卡功能 js、jquery

jquery：

法一：

思路：根据点击项是第几个元素（index），来控制第几个显示，代码如下：

html:

<div class="manuscript-detail">
    <div class="manuscript-detail-title">
        <a href="javascript:;" class="title-select title-selected">任务要求</a>
        <a href="javascript:;" class="title-select">附件下载</a>
        <a href="javascript:;" class="title-select">提交样板</a>
        <a href="javascript:;" class="title-select">推手稿件</a>
    </div>
    <div class="manuscript-detail-text detail-selected">
        0
    </div>
    <div class="manuscript-detail-text">
        1
    </div>
    <div class="manuscript-detail-text">
        2
    </div>
    <div class="manuscript-detail-text">
        3
    </div>
</div>

js:

<script>
$(".manuscript-detail-title .title-select").click(function(){
    $(this).addClass("title-selected").siblings().removeClass("title-selected");
    var selectNum = $(this).index();
    $(".manuscript-detail-text").eq(selectNum).addClass("detail-selected").siblings().removeClass("detail-selected");
})
</script>

css:

<style>
    .manuscript-detail .manuscript-detail-title{ width:850px; height:40px; line-height: 40px; border-bottom: 1px solid #eee; padding-left: 15px }
    .manuscript-detail .manuscript-detail-title .title-select{ font-size: 14px; color:#666; margin-right: 40px }
    .manuscript-detail .manuscript-detail-title .title-selected{ color:#ff8800; }
    .manuscript-detail .manuscript-detail-text{ display: none }
    .manuscript-detail .detail-selected{ display: block; }
</style>

点击下载法一demo

---

法二：

思路：用id控制哪项显示/隐藏，代码如下：

html:

<div id="tabbox">
    <ul class="select1">
       <li><a tab="tab1">导航菜单</a></li>
       <li><a tab="tab2">焦点幻灯片</a></li>
       <li><a tab="tab3">广告代码</a></li>
       <li><a tab="tab4">网页特效</a></li>
       <li><a tab="tab5">网页特效</a></li>
    </ul>
    <ul class="select2box">
        <li id="tab1" class="select2">
           <p>111</p>
        </li>
            
        <li id="tab2" class="select2">
            <p>222</p>
        </li>
    
        <li id="tab3" class="select2">
            <p>333</p>
        </li>
    
        <li id="tab4" class="select2">
            <p>444</p>
        </li>

        <li id="tab5" class="select2">
            <p>555</p>
        </li>
    </ul>
</div>

js:

<script type="text/javascript">
$(document).ready(function() {
    jQuery.jqtab = function(tabtit,tabcon) {
        $(tabcon).hide();
        $(tabtit+" li:first").addClass("show").show();
        $(tabcon+":first").show();
        $(tabtit+" li").click(function() {
            $(tabtit+" li").removeClass("show");
            $(this).addClass("show");
            $(tabcon).hide();
            var activeTab = $(this).find("a").attr("tab");
            $("#"+activeTab).fadeIn();
            return false;
        });
    };
    /*调用方法如下：*/
    $.jqtab(".select1",".select2");
});
</script>

css:

<style type="text/css">
body,ul,li{margin: 0;padding: 0;font: 12px normal "宋体", Arial, Helvetica, sans-serif;list-style: none;}
a{text-decoration: none;color: #000;font-size: 14px;}

#tabbox{ width:600px; overflow:hidden; margin:0 auto;}
.select2box{border: 1px solid #999;border-top: none;}
.select2{ display:none;}

.select1{height: 32px;border-bottom:1px solid #999;border-left: 1px solid #999;width: 100%;}
.select1 li{height:31px;line-height:31px;float:left;border:1px solid #999;border-left:none;margin-bottom: -1px;background: #e0e0e0;overflow: hidden;position: relative;}
.select1 li a {display: block;padding: 0 20px;border: 1px solid #fff;outline: none;}
.select1 li a:hover {background: #ccc;}    
.select1 .show,.select1 .show a:hover{background: #fff;border-bottom: 1px solid #fff;}

.select2 {padding:12px;font-size: 14px; line-height:175%;}
</style>

点击下载法二demo

---

js：

思路：用闭包函数绑定两个ul之间中对应的li
html:

<div id="container">
    <ul id="option">
        <li class="active">全部订单</li>
        <li>已发货订单</li>
        <li>完成订单</li>
        <li>失效订单</li>
    </ul>
    <ul id="card">
        <li class="active"><input type="text" value="111"><input type="text" value="111"></li>
        <li><input type="text" value="222"><input type="text" value="222"></li>
        <li><input type="text" value="333"><input type="text" value="333"></li>
        <li><input type="text" value="444"><input type="text" value="444"></li>
    </ul>
</div>

js:

<script>
    //获取 所有的选项控制
    var optionList = document.getElementById('option').getElementsByTagName('li');
    //获取所有 卡
    var cardList = document.getElementById('card').getElementsByTagName('li');
    
    //绑定单击事件
    for (var i = 0; i < optionList.length; i++) {
        (function(i){
            optionList[i].onclick = function(){
                for (var j = 0; j < optionList.length; j ++) {
                    optionList[j].className = "";
                }
                this.className = "active";
                for (var j = 0; j < cardList.length; j ++) {
                    cardList[j].className = "";
                }
                cardList[i].className = "active";
            }
        })(i)
    }
</script>

css:

<style>
    *{ margin:0; padding:0; }
    #container{ width:600px; margin:20px auto; }
    ul{ list-style:none; }
    #option{
        width:100%;
        height:38px;
        line-height:38px;
        border-left:1px solid #999;
        border-bottom:1px solid #999;
    }
    #option li{
        float:left;
        padding:0 20px;
        background-color:#f5f5f5;
        border-right:1px solid #999;
        border-top:1px solid #999;
        height:37px;
        cursor:pointer;
    }
    
    #option li.active{
        background-color:#fff;
        height:38px;
    }
    
    #card{
        border:1px solid #999;
        border-top:none;
    }
    #card li{
        padding:20px;
        height:400px;
        display:none;
    }
    #card li.active{
        display:block;
    }
</style>

点击下载 js demo

茫茫人海中，你能有缘搜到我的简书，希望我的总结能对你有帮助~