javascript 选项卡问题
问题描述
请输入代码JavaScript新手小白，请大家不要见笑，我想做个类似选项卡的东西，想点击button的时候，对应的内容展现，其他隐藏，但是我的代码出不来结果，看了半天也不知道错在那里，我想知道错在那里，请大神指教，谢谢！
<!DOCTYPE html>
<html>
<head>
<style>
ul>li{display:none;}
.active{display:block;}
</style>
<script>
function m() {
var obut = document.getElementsByTagName("button");
var oli = document.getElementsByTagName("li");
for (var i = 0; i < obut.length; i++) {
obut[i].index = i；
}
if (oli[this.index].style.display == "none") {
document.getElementsByClassName("active").style.display = "none "oli[this.index].ClassName = "active"
}
}
</script>
</head>
<body>
<div id="btn">
<button onclick="m()">box1</button>
<button onclick="m()">box2</button>
<button onclick="m()">box3</button>
<button onclick="m()">box4</button>
</div>
<ul id="box">
<li><div class="active" >box1</div></li>
<li><div >box2</div></li>
<li><div >box3</div></li>
<li><div >box4</div></li>
</ul>
</body>
</html>选项卡代码网上到处都有我也就不说了，我就说说你的问题吧，
1.首先第15行语法错误，；应该是;一个是中文状态下的一个是英文状态下的。
2.函数m()中的this并非指向的你按得button，其实是指向的windows,因为在行内的点击其实已经是一个匿名函数 ，这也是为什么你 onclick = "alert(12)";就能直接运行的原因，如果 onclick = "m()",其实就是 onclick = function(){function m(){}; m(); }此时的m的调用者是windows而不是这个按钮，所以你里面的this.index是取不到的，其实可以在行内里用onclick = "m(this)";然后再function m(_this){},然后把m函数里的this都换成_this即可；当然这种方法不推荐，推荐的还是向已经采纳的那个答案里的写法。
3.你给div加的active，不过你上面是让li就display:none？，后面的判断有错误，Obj.style.display是取不到值得，只有style写在标签里才能取到，所以你的if语句永远会是false,里面的代码也无法执行，
4，还有就是className是小写，不是ClassName,getElementsByClassName获取到的是一个集合，无法直接在后面加.style.display的，这个需要遍历
5,就是一些逻辑问题了，你发现点一圈一个都不显示了，是因为你虽然说active是display:block;但你又给每个属性都加了display:none属性，所以等四个都有display:none之后就会再也不显示了，你可以定义一个none的class，.none{display:none},然后没点一个就给class为active的li改class为none,就可以了。
下面是我对你的代码做出的修改（当然这并不是推荐的做法，合适的还是参照已采纳的那种写法）
<!DOCTYPE html>
<html>
<head>
<style>
li{display:none;}
.active{display:block;}
.none{
display:none;}
</style>
</head>
<body>
<ul id="btn">
<button onclick="m(this)">box1</button>
<button onclick="m(this)">box2</button>
<button onclick="m(this)">box3</button>
<button onclick="m(this)">box4</button>
</ul>
<ul id="box">
<li class = "active"><div>box1</div></li>
<li><div>box2</div></li>
<li><div>box3</div></li>
<li><div>box4</div></li>
</ul>
<script type="text/javascript">
function m(_this)
{
var obut=document.getElementsByTagName("button");
var oli=document.getElementsByTagName("li");
for(var i=0;i<obut.length;i++){
obut[i].index=i;
}
var ddd = document.getElementsByClassName("active");
for(var i = 0;i<ddd.length;i++){
ddd[i].className="none";
}
oli[_this.index].className = "active";}
</script>
</body>
</html>
大兄弟，好好努力学习，你会成功的
这篇关于javascript 选项卡问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
