使用JavaScript怎么實現(xiàn)一個選項卡功能

這篇文章給大家介紹使用JavaScript怎么實現(xiàn)一個選項卡功能，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

<div id="table">
 <!-- 頭部 -->
 <div id="header">
  <ul>
  <li class="selected">
   <a href="#" >1</a>
  </li>
  <li>
   <a href="#" >2</a>
  </li>
  <li>
   <a href="#" >3</a>
  </li>
  <li>
   <a href="#" >4</a>
  </li>
  <li>
   <a href="#" >5</a>
  </li>
  </ul>
 </div>
 <!-- 內(nèi)容 -->
 <div id="content">
  <div class="dom" >
  <ul>
   <li> <a href="#" >我是第一個選項卡的內(nèi)容1</a></li>
   <li> <a href="#" >我是第一個選項卡的內(nèi)容2</a></li>
   <li> <a href="#" >我是第一個選項卡的內(nèi)容3</a></li>
   <li> <a href="#" >我是第一個選項卡的內(nèi)容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第二個選項卡的內(nèi)容1</a></li>
   <li> <a href="#" >我是第二個選項卡的內(nèi)容2</a></li>
   <li> <a href="#" >我是第二個選項卡的內(nèi)容3</a></li>
   <li> <a href="#" >我是第二個選項卡的內(nèi)容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第三個選項卡的內(nèi)容1</a></li>
   <li> <a href="#" >我是第三個選項卡的內(nèi)容2</a></li>
   <li> <a href="#" >我是第三個選項卡的內(nèi)容3</a></li>
   <li> <a href="#" >我是第三個選項卡的內(nèi)容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第四個選項卡的內(nèi)容1</a></li>
   <li> <a href="#" >我是第四個選項卡的內(nèi)容2</a></li>
   <li> <a href="#" >我是第四個選項卡的內(nèi)容3</a></li>
   <li> <a href="#" >我是第四個選項卡的內(nèi)容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第五個選項卡的內(nèi)容1</a></li>
   <li> <a href="#" >我是第五個選項卡的內(nèi)容2</a></li>
   <li> <a href="#" >我是第五個選項卡的內(nèi)容3</a></li>
   <li> <a href="#" >我是第五個選項卡的內(nèi)容4</a></li>
  </ul>
  </div>
 </div>
 </div>
</body>

HTML代碼分解 ----頭部

頭部由一個包含了5個 li 標(biāo)簽的列表構(gòu)成，每個 li 標(biāo)簽中都包含一個 a 標(biāo)簽

這里的selected選擇器的作用是 改變選中的li的背景顏色

<div id="header">
  <ul>
  <li class="selected">
   <a href="#" >1</a>
  </li>
  <li>
   <a href="#" >2</a>
  </li>
  <li>
   <a href="#" >3</a>
  </li>
  <li>
   <a href="#" >4</a>
  </li>
  <li>
   <a href="#" >5</a>
  </li>
 </ul>
</div>

HTML代碼分解 ----內(nèi)容

在這里每一個含有dom選擇器的div依次代表的是每一個選項卡的內(nèi)容

.dom選擇器中設(shè)置display:none;，使每一個選項卡內(nèi)容隱藏

而對展現(xiàn)的內(nèi)容另外加一個style=“display: block”; 的屬性,使其展現(xiàn)在瀏覽器上

 <div id="content">
  <div class="dom" >
  <ul>
   <li> <a href="#" >我是第一個選項卡的內(nèi)容1</a></li>
   <li> <a href="#" >我是第一個選項卡的內(nèi)容2</a></li>
   <li> <a href="#" >我是第一個選項卡的內(nèi)容3</a></li>
   <li> <a href="#" >我是第一個選項卡的內(nèi)容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第二個選項卡的內(nèi)容1</a></li>
   <li> <a href="#" >我是第二個選項卡的內(nèi)容2</a></li>
   <li> <a href="#" >我是第二個選項卡的內(nèi)容3</a></li>
   <li> <a href="#" >我是第二個選項卡的內(nèi)容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第三個選項卡的內(nèi)容1</a></li>
   <li> <a href="#" >我是第三個選項卡的內(nèi)容2</a></li>
   <li> <a href="#" >我是第三個選項卡的內(nèi)容3</a></li>
   <li> <a href="#" >我是第三個選項卡的內(nèi)容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第四個選項卡的內(nèi)容1</a></li>
   <li> <a href="#" >我是第四個選項卡的內(nèi)容2</a></li>
   <li> <a href="#" >我是第四個選項卡的內(nèi)容3</a></li>
   <li> <a href="#" >我是第四個選項卡的內(nèi)容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第五個選項卡的內(nèi)容1</a></li>
   <li> <a href="#" >我是第五個選項卡的內(nèi)容2</a></li>
   <li> <a href="#" >我是第五個選項卡的內(nèi)容3</a></li>
   <li> <a href="#" >我是第五個選項卡的內(nèi)容4</a></li>
  </ul>
  </div>
</div>

CSS樣式

css代碼就不做詳細(xì)的說明了

<style>
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 text-decoration: none;
 list-style: none;
 }
 a {
 display: inline-block;
 color: black;
 float: left;
 text-align: center;
 }
 #table {
 width: 500px;
 height: 170px;
 margin: 0 auto;
 margin-top: 50px;
 border: 1px solid #e0e0e0;
 }
 /* 頭部樣式 */
 #table #header {
 width: 100%;
 height: 50px;
 }
 #table #header a {
 width: 20%;
 line-height: 50px;
 background-color: #e0e0e0;
 }
 #table #header a:hover {
 color: red;
 }
 #table #header .selected a{
 background-color:whitesmoke;
 }

 /* 內(nèi)容樣式 */
 #table #content {
 width: 100%;
 height: 120px;
 }
 #table #content .dom {
 margin-top: 10px;
 display: none;
 }
 #table #content .dom a{
 width: 50%; 
 padding: 10px 0;
 }

JS實現(xiàn)代碼一

JS代碼需要實現(xiàn)的是：每點擊一個選項卡數(shù)字，顯示出相應(yīng)的選項卡內(nèi)容
并且頭部樣式作相應(yīng)的改變

全部JS代碼顯示

<script>
 window.onload = function(){
 // 獲取元素
 var header = document.getElementById('header');
 var hLi = header.getElementsByTagName('li');
 var dom = document.getElementsByClassName('dom');
 // console.log(dom);
 
 // 遍歷hLi中所有的li標(biāo)簽
 for (let index = 0; index < hLi.length; index++) {
  //獲取單個li標(biāo)簽
  let li = hLi[index];

  //監(jiān)聽li標(biāo)簽點擊事件并改變content中的內(nèi)容
  li.addEventListener('click',function(){
  //改變點擊li的樣式
  li.setAttribute('class','selected');
  //消去原來li的樣式 并將class設(shè)置為null
  for (let j = 0; j < hLi.length; j++) { 
   if( j != index && hLi[j].getAttribute('class') == 'selected'){
   hLi[j].setAttribute('class','null'); 
   break;
   } 
  }
  //改變content中的顯示內(nèi)容
  //遍歷每一個dom k是dom的下標(biāo)
  for (let k = 0; k< hLi.length; k++) {
   if(index === k)
   dom[k].style.display = 'block';
   else
   dom[k].style.display = 'none';
  } 
  });
 
 }
 
 }
</script>

JS代碼分解 ----頭部樣式改變

對每一個li標(biāo)簽添加點擊監(jiān)聽器，將點擊的li標(biāo)簽的class屬性置為selected，使其展現(xiàn)在瀏覽器上。

再使用一個for循環(huán)遍歷每一個li標(biāo)簽的class屬性的值，若該屬性值===‘selected'并且不是剛剛點擊的li標(biāo)簽，則把該標(biāo)簽的class屬性值改為*‘null'*

 //獲取單個li標(biāo)簽
  let li = hLi[index];

  //監(jiān)聽li標(biāo)簽點擊事件并改變content中的內(nèi)容
  li.addEventListener('click',function(){
  //改變點擊li的樣式
  li.setAttribute('class','selected');
  //消去原來li的樣式 并將class設(shè)置為null
  for (let j = 0; j < hLi.length; j++) { 
   if( j != index && hLi[j].getAttribute('class') == 'selected'){
   hLi[j].setAttribute('class','null'); 
   break;
   } 
  }

JS代碼分解 ----內(nèi)容改變

用一個for語句遍歷每一個dom，如果該dom的下標(biāo)與點擊的 li 標(biāo)簽的下標(biāo)一樣，則將該dom的display置為block，否則置為none

//改變content中的顯示內(nèi)容
  //遍歷每一個dom k是dom的下標(biāo)
  for (let k = 0; k< hLi.length; k++) {
   if(index === k)
   dom[k].style.display = 'block';
   else
   dom[k].style.display = 'none';
  }

JS實現(xiàn)代碼二

代碼一還是有點復(fù)雜了，這里有一個更簡單的方法。就不作過多解釋
重要部分和理解都在注釋中提到了

window.onload = function(){
 // 獲取元素
 var header = document.getElementById('header');
 var hLi = $('header').getElementsByTagName('li');
 var dom = $('content').getElementsByClassName('dom');

 for (let index = 0; index < hLi.length; index++) {
  let li = hLi[index];
  //監(jiān)聽點擊事件
  li.addEventListener('click',function(){
  //清除同級別的選中樣式類
  for (let j = 0; j< hLi.length; j++) {
   hLi[j].className = ''; //將class屬性置為空 
   dom[j].style.display = 'none'; //將所有內(nèi)容隱藏
  }

  this.className = 'selected'; //設(shè)置當(dāng)前l(fā)i標(biāo)簽選中類
  dom[index].style.display = 'block'; //選定li標(biāo)簽顯示內(nèi)容
  });
  
 }

 //封裝
 function $(id) {
  return typeof id === 'string'? document.getElementById(id) : null;  
 }
}

關(guān)于使用JavaScript怎么實現(xiàn)一個選項卡功能就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。