技術標籤：前端踩坑合集

效果

程式碼

<div class="tabs">
    <ul id="tabs">
        <li class="tab-nav">管理導航</li>
        <li class="tab-nav-action">系統設定</li>
        <li class="tab-nav">使用者管理</li>
        <li class
 
="tab-nav">內容管理</li>
        <li class="tab-nav">其他管理</li>
    </ul>
</div>
<div id="tabs-body" class="tabs-body">
    <div style="display:block">
    1111111
    </div>
    <div style="display:none"
 
>
    222222222
    </div>
    <div style="display:none">
    33333333333
    </div>
    <div style="display:none">
    4444444444
    </div>
    <div style="display:none">
    555555555555555
    </div>
</div>

樣式就不貼了.

JQ程式碼

　　jquery程式碼

<script type="text/javascript">
    $(document).ready(function () {
        $("#tabs li").bind("click", function () {
            var index = $(this).index();
            var divs = $("#tabs-body > div");
            $(this).parent().children("li").attr("class", "tab-nav");//將所有選項置為未選中
            $(this).attr("class", "tab-nav-action"); //設定當前選中項為選中樣式
            divs.hide();//隱藏所有選中項內容
            divs.eq(index).show(); //顯示選中項對應內容
        });
 
    });
</script>