Html代碼如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <title>選項卡</title> <link href="css/bootstrap.css" rel="stylesheet"> <style type="text/css"> *{ padding: 0; margin:0; } .content { padding:100px; } .ct-ul { list-style: none; display: flex; margin-bottom: 0; } .ct-ul li { padding: 5px 10px; margin-right: -1px; border: solid 1px #ccc; border-bottom: none; cursor: pointer; } .ct-list { border: solid 1px #ccc; margin-top: -1px; min-height: 100px; } .one { background-color: #fff; } </style> </head> <body> <div class="content"> <ul class="ct-ul"> <li class="ct-li one">選項一</li> <li class="ct-li">選項二</li> <li class="ct-li">選項三</li> <li class="ct-li">選項四</li> </ul> <div class="ct-list"> <div class="item">選項一內容</div> <div class="item">選項二內容</div> <div class="item">選項三內容</div> <div class="item">選項四內容</div> </div> </div> </body> </html>
Jquery代碼如下
<script src="js/jquery-1.10.2.js"></script> <script> $(function(){ $(".item:gt(0)").hide();//選擇item類0之后的元素隱藏,為0的這個元素顯示 //主要邏輯就在於找到選項卡和內容框相對應的下標 $(".ct-li").unbind('click').click(function(){ var _index = $(this).index();//獲取點擊元素的下標 $(this).addClass("one") //給點擊的元素添加類 .siblings().removeClass();//相鄰元素隱藏類 $(".item").eq(_index).show() .siblings().hide();//選擇item元素中第_index個顯示出來，相鄰元素被隱藏 }) }) </script>
效果圖如下
