css配合JavaScript實現tab標簽切換效果

2019-11-19 12:43:45

字體：大中小

來源：轉載

供稿：網友

本文給大家介紹如何用CSS實現二維碼掃描的效果，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。

這是html代碼

<p id="main">  <!--標題-->  <ul id="tab">   <li class="showed">tab1</li>   <li>tab2</li>   <li>tab3</li>  </ul>  <!--內容-->  <p id="contents">   <ul style="display:block;"><!--默認顯示第一個-->    <span>模塊一</span>   </ul>   <ul>    <span>模塊二</span>   </ul>   <ul>    <span>模塊三</span>   </ul>  </p> </p>

CSS樣式

li{ list-style:none;} #main {  width: 600px;  margin: 200px auto; }  #tab {  overflow: hidden;  background: #000;  border: 1px solid #000; }  #tab li {  float: left;  color: #fff;  height: 30px;  cursor: pointer;  line-height: 30px;  padding: 0 20px; }  #tab li.showed {  color: #000;  background: #ddd; }  #contents {  border: 1px solid #000;  border-top-width: 0; }  #contents ul {  line-height: 150px;  display:none;  margin: 0 30px;  padding: 10px 0; }

下面是JS了

$(function() { window.onload = function() {  var lis = $('#tab li');  var uls = $('#contents ul');   lis.click(function() {   var li_selected = $(this); //選中的li分類   var num = li_selected.index(); //相對于同胞元素的位置   lis.removeClass(); //清空liCSS屬性   li_selected.addClass('showed'); //選中li添加屬性   uls.css('display', 'none'); //隱藏所有ul標簽   uls.eq(num).css('display', 'block'); //展示選中的li所對應的ul內容  }) }});

效果圖：