選項卡效果
阿新 • • 發佈:2018-04-25
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>
選項卡效果