溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹使用JavaScript怎么實現一個選項卡功能，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
<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" > <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" > <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',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;
}
}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怎么實現一個選項卡功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
