tab選項卡（1）：一級tab選項卡
阿新 • • 發佈：2018-12-21
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> *{ padding: 0px; margin: 0px; } body{ background-color: #545b79; } ul li { list-style: none; } .wrapper{ width: 600px; height: 100%; margin: 0 auto; } .wrapper .tab{ margin-top: 100px; width: 590px; height: 42px; opacity: 0.8; } .wrapper .tab li{ display: block; float: left; text-align: center; line-height: 42px; position: static; width: 144px; color: #FFFFFF; background: rgba(255,255,255,.1); cursor: pointer; border-right: 3px solid #768B9A; } .content{ width: 590px; height: 300px; background-color: #CCCCCC; } .content .content_item{ display: none; } .content .content_item.select{ display: block; } .tab li.on{ background-color: #CCCCCC; color: #000000; } </style> <script type="text/javascript" src="../js/jquery-3.2.1.js" ></script> <script> $(function(){ //獲取所有的li標籤 $(".tab>li").click(function(){ //設定當前標籤的樣式，並去除其他標籤的樣式 $(this).addClass("on").siblings("li").removeClass("on"); //設定滑鼠進入當前li對應div樣式 //先獲取當前的li的索引 var index=$(this).index(); // console.log(index); //獲取下面div對應的li $(".content>div:eq("+index+")").addClass("select").siblings("div").removeClass("select"); }); }); </script> <body> <div class="wrapper"> <ul class="tab"> <li class="tab-item on">前端</li> <li class="tab-item">Java</li> <li class="tab-item">python</li> <li class="tab-item">php</li> </ul> <div class="content"> <div class="content_item select"> <ul class=""> <li>CSS</li> <li>HTML</li> <li>js</li> </ul> </div> <div class="content_item"> <ul> <li>springMVC</li> <li>springboot</li> </ul> </div> <div class="content_item"> <ul> <li>人工智慧</li> <li>機器人大戰小也怪</li> </ul> </div> <div class="content_item"> <ul> <li>php</li> </ul> </div> </div> </div> </body> </html>
