用JS實現選項卡
阿新 • • 發佈：2020-03-25
本文例項為大家分享了JS實現選項卡的具體程式碼，供大家參考，具體內容如下
案例描述
在瀏覽器中顯示一個選項卡介面，頭部為1、2、3、4、5。點選頭部任意一個數字，都在下方顯示出不同的資訊，並且滑鼠停留在任意一個數字上時，數字的顏色改變。案例如下圖所示
預設的是數字1中的內容
點選數字二
點選其他數字依此類推，在這裡就不一一展示了
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> <!-- 內容 --> <div id="content"> <div class="dom" style="display: block"> <ul> <li> <a href="#" >我是第一個選項卡的內容1</a></li> <li> <a href="#" >我是第一個選項卡的內容2</a></li> <li> <a href="#" >我是第一個選項卡的內容3</a></li> <li> <a href="#" >我是第一個選項卡的內容4</a></li> </ul> </div> <div class="dom"> <ul> <li> <a href="#" >我是第二個選項卡的內容1</a></li> <li> <a href="#" >我是第二個選項卡的內容2</a></li> <li> <a href="#" >我是第二個選項卡的內容3</a></li> <li> <a href="#" >我是第二個選項卡的內容4</a></li> </ul> </div> <div class="dom"> <ul> <li> <a href="#" >我是第三個選項卡的內容1</a></li> <li> <a href="#" >我是第三個選項卡的內容2</a></li> <li> <a href="#" >我是第三個選項卡的內容3</a></li> <li> <a href="#" >我是第三個選項卡的內容4</a></li> </ul> </div> <div class="dom"> <ul> <li> <a href="#" >我是第四個選項卡的內容1</a></li> <li> <a href="#" >我是第四個選項卡的內容2</a></li> <li> <a href="#" >我是第四個選項卡的內容3</a></li> <li> <a href="#" >我是第四個選項卡的內容4</a></li> </ul> </div> <div class="dom"> <ul> <li> <a href="#" >我是第五個選項卡的內容1</a></li> <li> <a href="#" >我是第五個選項卡的內容2</a></li> <li> <a href="#" >我是第五個選項卡的內容3</a></li> <li> <a href="#" >我是第五個選項卡的內容4</a></li> </ul> </div> </div> </div> </body>
HTML程式碼分解 ----頭部
頭部由一個包含了5個 li 標籤的列表構成，每個 li 標籤中都包含一個 a 標籤
這裡的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程式碼分解 ----內容
在這裡每一個含有dom選擇器的div依次代表的是每一個選項卡的內容
.dom選擇器中設定display:none;，使每一個選項卡內容隱藏
而對展現的內容另外加一個style=“display: block”; 的屬性,使其展現在瀏覽器上
<div id="content"> <div class="dom" style="display: block"> <ul> <li> <a href="#" >我是第一個選項卡的內容1</a></li> <li> <a href="#" >我是第一個選項卡的內容2</a></li> <li> <a href="#" >我是第一個選項卡的內容3</a></li> <li> <a href="#" >我是第一個選項卡的內容4</a></li> </ul> </div> <div class="dom"> <ul> <li> <a href="#" >我是第二個選項卡的內容1</a></li> <li> <a href="#" >我是第二個選項卡的內容2</a></li> <li> <a href="#" >我是第二個選項卡的內容3</a></li> <li> <a href="#" >我是第二個選項卡的內容4</a></li> </ul> </div> <div class="dom"> <ul> <li> <a href="#" >我是第三個選項卡的內容1</a></li> <li> <a href="#" >我是第三個選項卡的內容2</a></li> <li> <a href="#" >我是第三個選項卡的內容3</a></li> <li> <a href="#" >我是第三個選項卡的內容4</a></li> </ul> </div> <div class="dom"> <ul> <li> <a href="#" >我是第四個選項卡的內容1</a></li> <li> <a href="#" >我是第四個選項卡的內容2</a></li> <li> <a href="#" >我是第四個選項卡的內容3</a></li> <li> <a href="#" >我是第四個選項卡的內容4</a></li> </ul> </div> <div class="dom"> <ul> <li> <a href="#" >我是第五個選項卡的內容1</a></li> <li> <a href="#" >我是第五個選項卡的內容2</a></li> <li> <a href="#" >我是第五個選項卡的內容3</a></li> <li> <a href="#" >我是第五個選項卡的內容4</a></li> </ul> </div> </div>
CSS樣式
css程式碼就不做詳細的說明了
<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;
}
/* 內容樣式 */
#table #content {
width: 100%;
height: 120px;
}
#table #content .dom {
margin-top: 10px;
display: none;
}
#table #content .dom a{
width: 50%;
padding: 10px 0;
}
JS實現程式碼一
JS程式碼需要實現的是：每點選一個選項卡數字，顯示出相應的選項卡內容
並且頭部樣式作相應的改變
全部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標籤
for (let index = 0; index < hLi.length; index++) {
//獲取單個li標籤
let li = hLi[index];
//監聽li標籤點選事件並改變content中的內容
li.addEventListener('click',function(){
//改變點選li的樣式
li.setAttribute('class','selected');
//消去原來li的樣式 並將class設定為null
for (let j = 0; j < hLi.length; j++) {
if( j != index && hLi[j].getAttribute('class') == 'selected'){
hLi[j].setAttribute('class','null');
break;
}
}
//改變content中的顯示內容
//遍歷每一個dom k是dom的下標
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標籤新增點選監聽器，將點選的li標籤的class屬性置為selected，使其展現在瀏覽器上。
再使用一個for迴圈遍歷每一個li標籤的class屬性的值，若該屬性值===‘selected'並且不是剛剛點選的li標籤，則把該標籤的class屬性值改為*‘null'*
//獲取單個li標籤
let li = hLi[index];
//監聽li標籤點選事件並改變content中的內容
li.addEventListener('click','null');
break;
}
}
JS程式碼分解 ----內容改變
用一個for語句遍歷每一個dom，如果該dom的下標與點選的 li 標籤的下標一樣，則將該dom的display置為block，否則置為none
//改變content中的顯示內容
//遍歷每一個dom k是dom的下標
for (let k = 0; k< hLi.length; k++) {
if(index === k)
dom[k].style.display = 'block';
else
dom[k].style.display = 'none';
}
JS實現程式碼二
程式碼一還是有點複雜了，這裡有一個更簡單的方法。就不作過多解釋
重要部分和理解都在註釋中提到了
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];
//監聽點選事件
li.addEventListener('click',function(){
//清除同級別的選中樣式類
for (let j = 0; j< hLi.length; j++) {
hLi[j].className = ''; //將class屬性置為空
dom[j].style.display = 'none'; //將所有內容隱藏
}
this.className = 'selected'; //設定當前li標籤選中類
dom[index].style.display = 'block'; //選定li標籤顯示內容
});
}
//封裝
function $(id) {
return typeof id === 'string'? document.getElementById(id) : null;
}
}
如果大家還想深入學習，可以點選兩個精彩的專題：javascript選項卡操作方法彙總 jquery選項卡操作方法彙總
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。