JavaScriptは多层色タブのネストを実现します。
本論文の例では、JavaScriptが多層色タブの入れ子を実現する具体的なコードを共有しています。参考にしてください。具体的な内容は以下の通りです。
これはJavaScriptを勉強する時の宿題です。考えがないと難しいですが、考えが正しいなら、一歩ずつ簡単にできます。
効果を実現する
HTML部分コード
考え方:左のliにマウスを移動すると、彼の色が変わります。だから、クラス名を変えるだけで、右側にも対応するdivが表示されます。対応があれば、ユーザー定義の索引値とthisを使用します。
これは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にマウスを移動すると、彼の色が変わります。だから、クラス名を変えるだけで、右側にも対応する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>
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。