选项卡问题：不能给对应的元素添加上类名称
点击前：
点击后：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
ul{
padding: 0px;
}
li{
list-style:none;
padding: 0px;
}
#nva li{
float: left;
width: 100px;
font-family: "微软雅黑";
font-size: 14px;
line-height: 24px;
text-align: center;
}
#nva .color_s{
border-top: 2px solid #ab7a35;
border-left: 1px solid #000;
border-right: 1px solid #000;
background-color: #fff;
position: relative;
z-index:999999;
}
#nva .color_h{
border-top: 1px solid #000;
border-right: 1px solid #000;
}
.show{
float: left;
display: block;
width: 302px;
border: 1px solid #000;
font-family: "微软雅黑";
font-size: 14px;
line-height: 24px;
text-align: center;
position:absolute;
left: 8px;
top:40px;
border-top: 2px solid #ab7a35;
}
.hide{
float: left;
width: 302px;
border: 1px solid #000;
display: none;
font-family: "微软雅黑";
font-size: 14px;
line-height: 24px;
text-align: center;
position:absolute;
left: 8px;
top:40px;
}
</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload=function(){
var nul=document.getElementById("nva");
var nli=nul.getElementsByTagName("li");
var bdiv=document.getElementById("box");
var tdiv=bdiv.getElementsByTagName("div");
for(var i=0;i<nli.length;i++){
nli[i].index=i;
nli[i].onclick=function(){
for(var i=0;i<nli.length;i++){
nli[i].className="color_h";
}
this.ClassName="color_s";
for(var j=0;j<tdiv.length;j++){
tdiv[j].className="hide";
}
tdiv[this.index].ClassName="show";
}
}
}
</script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="box">
<ul id="nva">
<li class="color_s">房产：</li>
<li class="color_h">家居:</li>
<li class="color_h">二手房：</li>
</ul>
<div class="show">
<ul>
<li>275万购昌平邻铁三居 总价20万买一居</li>
<li> 200万内购五环三居 140万安家东三环</li>
<li>北京首现零首付楼盘 53万购东5环50平</li>
<li>京楼盘直降5000 中信府 公园楼王现房</li>
</ul>
</div>
<div class="hide">
<ul>
<li>40平出租屋大改造 美少女的混搭小窝</li>
<li>经典清新简欧爱家 90平老房焕发新生</li>
<li>新中式的酷色温情 66平撞色活泼家居</li>
<li>瓷砖就像选好老婆 卫生间烟道的设计</li>
</ul>
</div>
<div class="hide">
<ul>
<li>通州豪华3居260万 二环稀缺2居250w甩</li>
<li>西3环通透2居290万 130万2居限量抢购</li>
<li>黄城根小学学区仅260万 121平70万抛!</li>
<li>独家别墅280万 苏州桥2居优惠价248万</li>
</ul>
</div>
</div>
</body>
</html>
个回答
-
- 吴量
- 2019-07-21 16:20:46
window.onload = function () {
var nul = document.getElementById("nva");
var nli = nul.getElementsByTagName("li");
var bdiv = document.getElementById("box");
var tdiv = bdiv.getElementsByTagName("div");
for (var i = 0; i < nli.length; i++) {
nli[i].index = i;
nli[i].onclick = function(){
//处理li
for (let p = 0; p < nli.length; p++) {
this.index == p ? this.className = 'color_s' : nli[p].className = 'color_h'
}
//处理下边内容
for (var j = 0; j < tdiv.length; j++) {
this.index == j ? tdiv[j].className = "show" : tdiv[j].className = "hide";
}
}
}
}
-
- 吴量
- 2019-07-21 17:28:58
三目判断，类似if else