溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關利用JavaScript實現多層顏色選項卡嵌套，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
HTML部分代碼
<div class="box" id="box"> <ul id="leftBox"> <li class="active">a</li> <li>b</li> <li>c</li> <li>d</li> </ul> <div id="rightBox"> <div id="rightBox1" class="active"> <a href="#" >a1</a> <ul class="tabUl"> <li class="hover">a1</li> <li>a2</li> <li>a3</li> <li>a4</li> </ul> </div> <div id="rightBox2"> <a href="#" >b1</a> <ul class="tabUl"> <li class="hover">b1</li> <li>b2</li> <li>b3</li> <li>b4</li> </ul> </div> <div id="rightBox3"> <a href="#" >c1</a> <ul class="tabUl"> <li class="hover">c1</li> <li>c2</li> <li>c3</li> <li>c4</li> <li>c5</li> <li>c6</li> </ul> </div> <div id="rightBox4"> <a href="#" >d1</a> <ul class="tabUl"> <li class="hover">d1</li> <li>d2</li> <li>d3</li> <li>d4</li> </ul> </div> </div> </div>
css部分代碼
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
.box {
width: 800px;
border: 1px solid #000000;
margin: 20px auto;
background: blue;
}
.box:after {
content: "";
display: block;
clear: both;
}
#leftBox {
float: left
}
#rightBox {
float: left;
}
#leftBox li {
width: 200px;
height: 89px;
background: red;
margin-bottom: 2px;
color: #fff;
font: 50px/89px "黑體";
text-align: center;
}
#rightBox div {
display: none;
}
#rightBox .active {
display: block;
}
#rightBox a {
display: block;
width: 600px;
height: 325px;
background: #0F0;
font-size: 100px;
color: #000;
text-align: center;
text-decoration: none;
line-height: 360px;
}
.tabUl {
display: table;
width: 100%;
}
.tabUl li {
display: table-cell;
background: #909;
color: #fff;
font-size: 20px;
text-align: center;
height: 40px;
line-height: 40px;
border-right: 2px solid #03C;
cursor: pointer;
}
.tabUl li.hover {
background: #fff;
color: #000;
}
#leftBox .active {
background: yellow;
color: #000;
}
</style>JavaScript實現代碼
思路：鼠標移入左邊的每個li后，都會改變他的顏色，所以只需要改變class名，同時右邊也會顯示對于的div，有對應的話一般都會用到自定義索引值和this…
<script>
/*
點擊左邊的li后，所點擊li加上class名，其它清除所有，然后右邊對應索引值的div也加上class=active，所以要用到this
*/
//獲取元素
var lUl = document.getElementById('leftBox')
var rUl = document.getElementById('rightBox')
var lLi = lUl.getElementsByTagName('li')
var oDiv = rUl.getElementsByTagName('div')
//改變左邊樣式
for (var i = 0; i < lLi.length; i++) {
//自定義索引
lLi[i].index = i
lLi[i].onmouseenter = function () {
//清空所有classname
for (var j = 0; j < lLi.length; j++) {
lLi[j].className = ''
oDiv[j].className = ''
}
//給相應的li添加上classname
this.className = 'active'
oDiv[this.index].className = 'active'
}
}
//右邊
for (var k = 0; k < oDiv.length; k++) {
fn(oDiv[k])
}
function fn(parent) {
//獲取用到的元素
var rLi = parent.getElementsByTagName('li')
var oa = parent.getElementsByTagName('a')[0]
for (var i = 0; i < rLi.length; i++) {
rLi[i].onmouseenter = function(){
for (j = 0; j < lLi.length; j++) {
rLi[j].className = ''
}
this.className = 'hover'
//把li標簽中的文字傳到a標簽中
oa.innerHTML = this.innerHTML
}
}
}
</script>以上就是利用JavaScript實現多層顏色選項卡嵌套，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
