用JS實現(xiàn)選項卡
更新時間：2020年03月23日 10:46:01 作者：前端coder
這篇文章主要為大家詳細(xì)介紹了用JS實現(xiàn)選項卡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)選項卡的具體代碼，供大家參考，具體內(nèi)容如下
案例描述
在瀏覽器中顯示一個選項卡界面，頭部為1、2、3、4、5。點擊頭部任意一個數(shù)字，都在下方顯示出不同的信息，并且鼠標(biāo)停留在任意一個數(shù)字上時，數(shù)字的顏色改變。案例如下圖所示
默認(rèn)的是數(shù)字1中的內(nèi)容
點擊數(shù)字二
點擊其他數(shù)字依此類推，在這里就不一一展示了
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="#" >我是第一個選項卡的內(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" style="display: block"> <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;
}
}
如果大家還想深入學(xué)習(xí)，可以點擊兩個精彩的專題：javascript選項卡操作方法匯總 jquery選項卡操作方法匯總
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章整理了JavaScript文件上傳的常見問題，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
js的for in循環(huán)和java里foreach循環(huán)的區(qū)別分析
這篇文章主要介紹了js的for in循環(huán)和java里foreach循環(huán)的區(qū)別,實例分析了js的for in循環(huán)使用技巧并說明了與Java中foreach循環(huán)的使用區(qū)別,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
vuex是基于vuex.js的狀態(tài)管理工具,可以把它理解為一個倉庫,下面這篇文章主要給大家介紹了關(guān)于uniapp中如何使用vuex并持久化的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
js設(shè)置控件的隱藏與顯示，設(shè)置控件style的display和visibility屬性就可以了，下面有個示例，需要的朋友可以參考下2014-08-08
下面小編就為大家?guī)硪黄狫avaScript原生對象常用方法總結(jié)(推薦)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
本篇文章主要是對js中call與apply的用法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了BootStrap入門教程(三)之響應(yīng)式原理的相關(guān)資料，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09
這篇文章主要介紹了基于JS實現(xiàn)視頻上傳顯示進(jìn)度條,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
上一篇的目的只是讓大家簡單的理解自定事件是如何模擬出來的，大家不難發(fā)現(xiàn)會有很多缺陷,本篇主要已解決上一篇的問題為主，感興趣的朋友可以參考，或許本文對你有所幫助2013-02-02
除Console.log()外更多的Javascript調(diào)試命令
本篇文章給大家介紹了除Console.log()外更多的Javascript調(diào)試命令，方便大家更多環(huán)境下的JS調(diào)試，學(xué)習(xí)下吧。2018-01-01