实用的Jquery选项卡TAB示例代码

CSS 样式部分：


<style type="text/css"> 
.order_box .stitle { width: 825px; clear: right; height: 27px; border-bottom: 2px solid #A10000; } 
.order_box .stitle .close { width: 80px; height: 18px; border-top: 1px solid #dedede; border-left: 1px solid #dedede; border-right: 1px solid #dedede;
                            background: #f1f1f1; color: #000; text-align: center; float: left; margin-right: 5px; padding-top: 8px; } 
.order_box .stitle .open { width: 82px; height: 20px; background: #A10000; color: #fff; text-align: center; float: left; margin-right: 5px; 
                           padding-top: 8px; overflow: hidden; } 
.order_box ul li { cursor: pointer; display: list-item; list-style:none; } 
</style>

JS部分：


<script src="../script/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    //选项卡切换 
    $(function () {
        $(".stitle li").click(function () {
            var index_tab = $(this).parent().children().index($(this)); //选项卡的索引值 
            $(this).parent().find(".open").removeClass("open").addClass("close"); //选项卡背景处理 
            $(this).removeClass("close").addClass("open");
            var content_obj = $(".cntorder") //内容节点 
            content_obj.hide();
            content_obj.eq(index_tab).show();
        });
    });
</script>

HTML 部分:


<body> 
<div class="order_box"> 
    <div class="stitle"> 
        <ul> 
            <li class="open">选项卡1</li> 
            <li class="close">选项卡2</li> 
            <li class="close">选项卡3</li> 
        </ul> 
    </div>
    <br />
    <br />
    <br />
    <br />
    <br /> 
    <div class="cntorder" >选项卡1选项卡1选项卡1选项卡1选项卡1</div> 
    <div class="cntorder" style="display: none;">选项卡2选项卡2选项卡2选项卡2选项卡2</div> 
    <div class="cntorder" style="display: none;">选项卡3选项卡3选项卡3选项卡3选项卡3</div> 
</div> 
</body>

效果：

实用的Jquery选项卡TAB示例代码

常用的jquery总结一下下，当做笔记了，用的时候有地方看看而已

实用的Jquery选项卡TAB示例代码

相关推荐