本文實(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ù)字依此類推，在這里就不一一展示了

HTML代碼

全部HTML代碼展示

<div id='table'> <!-- 頭部 --> <div id='header'> <ul> <li class='selected'> <a href='http://www.gepszalag.com/bcjs/14743.html#' >1</a> </li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >2</a> </li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >3</a> </li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >4</a> </li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >5</a> </li> </ul> </div> <!-- 內(nèi)容 --> <div id='content'> <div style='display: block'> <ul> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第一個(gè)選項(xiàng)卡的內(nèi)容1</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第一個(gè)選項(xiàng)卡的內(nèi)容2</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第一個(gè)選項(xiàng)卡的內(nèi)容3</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第一個(gè)選項(xiàng)卡的內(nèi)容4</a></li> </ul> </div> <div class='dom'> <ul> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第二個(gè)選項(xiàng)卡的內(nèi)容1</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第二個(gè)選項(xiàng)卡的內(nèi)容2</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第二個(gè)選項(xiàng)卡的內(nèi)容3</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第二個(gè)選項(xiàng)卡的內(nèi)容4</a></li> </ul> </div> <div class='dom'> <ul> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第三個(gè)選項(xiàng)卡的內(nèi)容1</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第三個(gè)選項(xiàng)卡的內(nèi)容2</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第三個(gè)選項(xiàng)卡的內(nèi)容3</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第三個(gè)選項(xiàng)卡的內(nèi)容4</a></li> </ul> </div> <div class='dom'> <ul> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第四個(gè)選項(xiàng)卡的內(nèi)容1</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第四個(gè)選項(xiàng)卡的內(nèi)容2</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第四個(gè)選項(xiàng)卡的內(nèi)容3</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第四個(gè)選項(xiàng)卡的內(nèi)容4</a></li> </ul> </div> <div class='dom'> <ul> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第五個(gè)選項(xiàng)卡的內(nèi)容1</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第五個(gè)選項(xiàng)卡的內(nèi)容2</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第五個(gè)選項(xiàng)卡的內(nèi)容3</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第五個(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='http://www.gepszalag.com/bcjs/14743.html#' >1</a> </li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >2</a> </li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >3</a> </li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >4</a> </li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >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 style='display: block'> <ul> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第一個(gè)選項(xiàng)卡的內(nèi)容1</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第一個(gè)選項(xiàng)卡的內(nèi)容2</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第一個(gè)選項(xiàng)卡的內(nèi)容3</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第一個(gè)選項(xiàng)卡的內(nèi)容4</a></li> </ul> </div> <div class='dom'> <ul> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第二個(gè)選項(xiàng)卡的內(nèi)容1</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第二個(gè)選項(xiàng)卡的內(nèi)容2</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第二個(gè)選項(xiàng)卡的內(nèi)容3</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第二個(gè)選項(xiàng)卡的內(nèi)容4</a></li> </ul> </div> <div class='dom'> <ul> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第三個(gè)選項(xiàng)卡的內(nèi)容1</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第三個(gè)選項(xiàng)卡的內(nèi)容2</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第三個(gè)選項(xiàng)卡的內(nèi)容3</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第三個(gè)選項(xiàng)卡的內(nèi)容4</a></li> </ul> </div> <div class='dom'> <ul> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第四個(gè)選項(xiàng)卡的內(nèi)容1</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第四個(gè)選項(xiàng)卡的內(nèi)容2</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第四個(gè)選項(xiàng)卡的內(nèi)容3</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第四個(gè)選項(xiàng)卡的內(nèi)容4</a></li> </ul> </div> <div class='dom'> <ul> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第五個(gè)選項(xiàng)卡的內(nèi)容1</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第五個(gè)選項(xiàng)卡的內(nèi)容2</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第五個(gè)選項(xiàng)卡的內(nèi)容3</a></li> <li> <a href='http://www.gepszalag.com/bcjs/14743.html#' >我是第五個(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)聽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)聽器，將點(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)聽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)聽點(diǎn)擊事件 li.addEventListener(’click’,function(){ //清除同級(jí)別的選中樣式類 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; }}

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

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