溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
選項卡這個效果估計以后的項目會經常涉及到，對代碼還是半熟練的情況下還是寫下來吧。
先來布局一個簡單的頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#box{margin: 50px;}
#box li{width: 100px;height: 40px;line-height: 40px;text-align: center;background-color: #d8d8d8;margin-right: 2px;float: left;}
#box .active{background: red;}
#content{clear: both;}
#content div{width: 404px;height: 200px;border: 1px solid #d8d8d8;display: none;}
</style>
</head>
<body>
<div id="box">
<!--這個ul為選項卡的菜單，提供選擇項，并且設置其中一個li為默認樣式-->
<ul>
<li class="active">新聞</li>
<li>社會</li>
<li>科技</li>
<li>娛樂</li>
</ul>
<!--這個div為選項卡的內容，顯示不同菜單的不同內容，并且設置其中一個div為可見，其他隱藏-->
<div id="content">
<div >新聞</div>
<div>社會</div>
<div>科技</div>
<div>娛樂</div>
</div>
</div>
</body>
</html>
選項卡的制作原理是：有若干的選項和對應數量的內容，當對其中一個選項進行操作時，顯示對應內容，其他內容不顯示。所以，在頁面布局的時候，我們先給一個選項設置特殊樣式和顯示其對應的內容，其他選項樣式不變，對應內容隱藏。當操作選項時，把選項的類名改為特殊樣式的類名，并且顯示對應內容。
<script type="text/javascript">
window.onload=function(){
var oBox=document.getElementById('box');
var aLi=oBox.getElementsByTagName('li');
var oCon=document.getElementById('content');
var aDiv=oCon.getElementsByTagName('div');
for(var i=0;i<aLi.length;i++){
aLi[i].index=i; //為每個li添加對應的索引index
aLi[i].onclick=function(){ //循環為每個li添加onclick事件
for(var i=0;i<aLi.length;i++){
aLi[i].className=''; //循環清空li樣式
aDiv[i].style.display='none'; //循環隱藏所有div
}
this.className='active'; //當前點擊的元素樣式變成active
aDiv[this.index].style.display='block'; //this.index 獲取當前li對應的索引
}
}
}
</script>
今天在做選項卡效果時遇到了一個非常低級的錯誤，但卻遲遲找不到原因，如下：
這個是我布局的選項卡的菜單，看起來很簡單，一個ul包著3個li，其中一個是 |，所以可以點擊的菜單項只有兩項，沒毛病。
<ul id="text"> <li class="active"><a href="javascript:" rel="external nofollow" rel="external nofollow" >必備軟件</a></li> <li id="shu">|</li> <li><a href="javascript:" rel="external nofollow" rel="external nofollow" >常用軟件</a></li> </ul>
內容就不看了，接下來我就開始寫JS的代碼，getElementById什么的巴拉巴拉開始寫，寫完for循環覺得寫完了，然后就運行。。。默認頁正常，點擊，，空白。？？？？？怎么回事？F12，aLink[i] is undefind；加了一個console.log，檢測獲取的aLi,aLink，有值，能獲取，沒錯。然后下面循環檢測aLink[i]，未定義，這是什么情況？在JS代碼搞了將近一個小時，換獲取方法，換變量名….各種方法，沒效果。萬萬沒想到的是，重新檢測aLi的時候，發現長度為3。。頓時懵逼，aLink的長度為2，所以肯定有一個找不到。趕緊把第二個li改成span，成功。萬惡的 ||||||||。只能說自己的知識還不夠，還要繼續努力！！！
var oBox=document.getElementById('box');
var oNav=document.getElementById('nav');
var aLi=oNav.getElementsByTagName('li');
var oCon=document.getElementById('con');
var aLink=oBox.getElementsByClassName('hide');
for(var i=0;i<aLi.length;i++){
aLi[i].index=i; //為每個li添加對應的索引index
aLi[i].onclick=function(){ //循環為每個li添加onclick事件
for(var i=0;i<aLi.length;i++){
aLi[i].className=''; //循環清空li樣式
aLink[i].style.display='none'; //循環隱藏所有div
}
this.className='active'; //當前點擊的元素樣式變成active
aLink[this.index].style.display='block'; //this.index 獲取當前li對應的索引
}
}
以上所述是小編給大家介紹的JS選項卡效果詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
