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总结一下下，当做笔记了，用的时候有地方看看而已