我要评论本文实例为大家分享了javascript实现多层颜色选项卡嵌套的具体代码，供大家参考，具体内容如下
这是学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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论