一个html / css / js脚本，一次只能打开1个分区
该脚本可以完美运行！在花了几天时间寻找更专业的代码后，我将它们放在一起-它不需要任何简单的资源文件-而是丑陋的代码。如何在不添加jsQuery的情况下使用单个函数将其缩短。关闭所有div，然后仅确定单击一次即可将其打开。当然，可以使用单个功能完成此操作。
<!DOCTYPE html>
<html>
<head>
<style> div { width:100%; height:100px; text-align: center; display: none; } </style>
</head>
<body>
<center>
<nobr>
<button onclick="hs1()"> Content div1
</button>
<button onclick="hs2()"> Content div2
</button>
<button onclick="hs3()"> Content div3
</button>
<button onclick="hs4()"> Content div4
</button>
<button onclick="hs5()"> Content div5
</button>
</nobr>
</center>
<hr>
<center>
<nobr>
<a href="#!" id="" onclick="return hs1()"> Content div1 </a> |
<a href="#!" id="" onclick="return hs2()"> Content div2 </a> |
<a href="#!" id="" onclick="return hs3()"> Content div3 </a> |
<a href="#!" id="" onclick="return hs4()"> Content div4 </a> |
<a href="#!" id="" onclick="return hs5()"> Content div5 </a>
</nobr>
</center>
<hr>
<div id="div1" style="background-color:#ff00ff; display:block;">DIV element 1.
</div>
<div id="div2" style="background-color:#ff0000;">DIV element 2.
</div>
<div id="div3" style="background-color:#cccccc;">DIV element 3.
</div>
<div id="div4" style="background-color:#ffff00;">DIV element 4.
</div>
<div id="div5" style="background-color:#0000ff;">DIV element 5.
</div>
<script>
function hs1()
{
document.getElementById("div1").style.display = "block";
document.getElementById("div2").style.display = "none";
document.getElementById("div3").style.display = "none";
document.getElementById("div4").style.display = "none";
document.getElementById("div5").style.display = "none";
}
function hs2()
{
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "block";
document.getElementById("div3").style.display = "none";
document.getElementById("div4").style.display = "none";
document.getElementById("div5").style.display = "none";
}
function hs3()
{
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "none";
document.getElementById("div3").style.display = "block";
document.getElementById("div4").style.display = "none";
document.getElementById("div5").style.display = "none";
}
function hs4()
{
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "none";
document.getElementById("div3").style.display = "none";
document.getElementById("div4").style.display = "block";
document.getElementById("div5").style.display = "none";
}
function hs5()
{
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "none";
document.getElementById("div3").style.display = "none";
document.getElementById("div4").style.display = "none";
document.getElementById("div5").style.display = "block";
}
</script>
</body>
</html>
感谢@Naota和@JoeFarrell您的回答很有帮助。我根据您发布的内容进行了改编，并选择了以下内容-仅仅是因为在我理解的阶段，我可以自己遵循它，而不是因为它更好。我将可见div的显示放在单独的括号中，因此它没有运行5次。如果出现明显错误，请通知我。
<script>
function hs(divno){
for(var i = 1 ; i <=5 ; i++){
document.getElementById("div"+i).style.display = "none";
}
{
document.getElementById("div"+divno).style.display = "block";
}
return false;
}
</script>
链接;
<a href="#!" onclick="return hs(1)"> Content div1 </a> |
<a href="#!" onclick="return hs(2)"> Content div2 </a> |
<a href="#!" onclick="return hs(3)"> Content div3 </a> |
<a href="#!" onclick="return hs(4)"> Content div4 </a> |
<a href="#!" onclick="return hs(5)"> Content div5 </a>
史蒂夫
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句