1. 程式人生 > >選項卡效果

選項卡效果

web開發

<div class="navtab_big mb10">
    <div id="tab">
        <a href="javascript:void(0)" data-value="0" class="selected">tab1</a>
        <a href="javascript:void(0)" data-value="1">tab2</a>
        <a href="javascript:void(0)" data-value="2">tab3</a>
    </div>
</div>
<div class="tabContent">tab1內容</div>
<div class="tabContent" style="display:none">tab2內容</div>
<div class="tabContent" style="display:none">tab3內容</div>
<script>
    /** * 初始化tab標簽
            */
    $(document).ready(function(){
        $("#tab a").bind("click", function() {
            $(this).addClass("selected");
            $(this).siblings().removeClass("selected");
            var index = $(this).attr("data-value");
            $(".tabContent:eq(" + index + ")").show();
            $(".tabContent:eq(" + index + ")").siblings(".tabContent").hide();
        });
    })
</script>

技術分享圖片


選項卡效果