溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下怎么基于JavaScript實現選項卡效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
其中用到兩個很關鍵的思想：
1.為對象增加index屬性，并通過this對index 的調用來使每個選項能顯示出所對應的內容，并且屬性值要設置為循環時的數值-i。
2.通過對class（類）的靈活使用，來改變當先所選中目標的樣式。
3、用for循環嵌套事件對每一項進行遍歷。
4、在編譯時，位于body中的div和input要有預先定義的行內樣式或者信息。
5、button和div.style.display要同時清零，同時出現才能達到選項卡的目的。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選項卡</title>
<style type="text/css">
#div1 .active{
background: red;
color: white;
}
#div1 div{
width: 237px;
height:150px;
background:#CCC;
display: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv = document.getElementById('div1');
var btn = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');
for (var i = 0; i < btn.length; i++) {
btn[i].index=i;
//給btn增加一個index的屬性
btn[i].onmouseover = function(){
for (var i = 0; i < btn.length; i++) {
btn[i].className = '';
aDiv[i].style.display = 'none';
}
this.className = 'active';
aDiv[this.index].style.display = 'block';
//調用index屬性
}
}
};
</script>
</head>
<body>
<div id="div1">
<input type="button" value="首頁" class="active">
<input type="button" value="菜單">
<input type="button" value="幫助">
<input type="button" value="聯系">
<input type="button" value="贊助">
<div >這是首頁</div>
<div>這是菜單</div>
<div>這是幫助</div>
<div>這是聯系</div>
<div>這是贊助</div>
</div>
</body>
</html>以上是“怎么基于JavaScript實現選項卡效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
