用JS實(shí)現(xiàn)選項(xiàng)卡

更新時(shí)間：2020年03月23日 10:46:01 作者：前端coder

這篇文章主要為大家詳細(xì)介紹了用JS實(shí)現(xiàn)選項(xiàng)卡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS實(shí)現(xiàn)選項(xiàng)卡的具體代碼，供大家參考，具體內(nèi)容如下

案例描述

在瀏覽器中顯示一個(gè)選項(xiàng)卡界面，頭部為1、2、3、4、5。點(diǎn)擊頭部任意一個(gè)數(shù)字，都在下方顯示出不同的信息，并且鼠標(biāo)停留在任意一個(gè)數(shù)字上時(shí)，數(shù)字的顏色改變。案例如下圖所示

默認(rèn)的是數(shù)字1中的內(nèi)容

點(diǎn)擊數(shù)字二

點(diǎn)擊其他數(shù)字依此類(lèi)推，在這里就不一一展示了

HTML代碼

全部HTML代碼展示

<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" style="display: block">
  <ul>
   <li> <a href="#" >我是第一個(gè)選項(xiàng)卡的內(nèi)容1</a></li>
   <li> <a href="#" >我是第一個(gè)選項(xiàng)卡的內(nèi)容2</a></li>
   <li> <a href="#" >我是第一個(gè)選項(xiàng)卡的內(nèi)容3</a></li>
   <li> <a href="#" >我是第一個(gè)選項(xiàng)卡的內(nèi)容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第二個(gè)選項(xiàng)卡的內(nèi)容1</a></li>
   <li> <a href="#" >我是第二個(gè)選項(xiàng)卡的內(nèi)容2</a></li>
   <li> <a href="#" >我是第二個(gè)選項(xiàng)卡的內(nèi)容3</a></li>
   <li> <a href="#" >我是第二個(gè)選項(xiàng)卡的內(nèi)容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第三個(gè)選項(xiàng)卡的內(nèi)容1</a></li>
   <li> <a href="#" >我是第三個(gè)選項(xiàng)卡的內(nèi)容2</a></li>
   <li> <a href="#" >我是第三個(gè)選項(xiàng)卡的內(nèi)容3</a></li>
   <li> <a href="#" >我是第三個(gè)選項(xiàng)卡的內(nèi)容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第四個(gè)選項(xiàng)卡的內(nèi)容1</a></li>
   <li> <a href="#" >我是第四個(gè)選項(xiàng)卡的內(nèi)容2</a></li>
   <li> <a href="#" >我是第四個(gè)選項(xiàng)卡的內(nèi)容3</a></li>
   <li> <a href="#" >我是第四個(gè)選項(xiàng)卡的內(nèi)容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第五個(gè)選項(xiàng)卡的內(nèi)容1</a></li>
   <li> <a href="#" >我是第五個(gè)選項(xiàng)卡的內(nèi)容2</a></li>
   <li> <a href="#" >我是第五個(gè)選項(xiàng)卡的內(nèi)容3</a></li>
   <li> <a href="#" >我是第五個(gè)選項(xiàng)卡的內(nèi)容4</a></li>
  </ul>
  </div>
 </div>
 </div>
</body>

HTML代碼分解 ----頭部

頭部由一個(gè)包含了5個(gè) li 標(biāo)簽的列表構(gòu)成，每個(gè) li 標(biāo)簽中都包含一個(gè) 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)容

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

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

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

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

CSS樣式

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

<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實(shí)現(xiàn)代碼一

JS代碼需要實(shí)現(xiàn)的是：每點(diǎn)擊一個(gè)選項(xiàng)卡數(shù)字，顯示出相應(yīng)的選項(xià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++) {
  //獲取單個(gè)li標(biāo)簽
  let li = hLi[index];

  //監(jiān)聽(tīng)li標(biāo)簽點(diǎn)擊事件并改變content中的內(nèi)容
  li.addEventListener('click',function(){
  //改變點(diǎn)擊li的樣式
  li.setAttribute('class','selected');
  //消去原來(lái)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)容
  //遍歷每一個(gè)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代碼分解 ----頭部樣式改變

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

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

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

  //監(jiān)聽(tīng)li標(biāo)簽點(diǎn)擊事件并改變content中的內(nèi)容
  li.addEventListener('click',function(){
  //改變點(diǎn)擊li的樣式
  li.setAttribute('class','selected');
  //消去原來(lái)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)容改變

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

//改變content中的顯示內(nèi)容
  //遍歷每一個(gè)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實(shí)現(xiàn)代碼二

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

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)聽(tīng)點(diǎn)擊事件
  li.addEventListener('click',function(){
  //清除同級(jí)別的選中樣式類(lèi)
  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)簽選中類(lèi)
  dom[index].style.display = 'block'; //選定li標(biāo)簽顯示內(nèi)容
  });
  
 }

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

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊兩個(gè)精彩的專(zhuān)題：javascript選項(xiàng)卡操作方法匯總 jquery選項(xiàng)卡操作方法匯總

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: