Javascript 在网页上一次只打开一个分区的脚本
一次只打开一个分区的html/css/js脚本 这个脚本非常好用！我花了几天的时间寻找更专业的代码，然后把它放在一起——它不需要任何资源文件——它很简单——但它的代码很难看。我如何用一个函数来缩短它，而不必添加jsQuery。关闭所有div，只需识别单击以打开它的div。当然，它可以用一个单一的功能来完成Javascript 在网页上一次只打开一个分区的脚本,javascript,html,css,Javascript,Html,Css,一次只打开一个分区的html/css/js脚本 这个脚本非常好用！我花了几天的时间寻找更专业的代码，然后把它放在一起——它不需要任何资源文件——它很简单——但它的代码很难看。我如何用一个函数来缩短它，而不必添加jsQuery。关闭所有div，只需识别单击以打开它的div。当然，它可以用一个单一的功能来完成 <!DOCTYPE html> <html> <head> <style> 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>
div{宽度：100%；高度：100px；文本对齐：居中；显示：无；}
内容组1
内容部2
内容组3
内容组4
内容部5
|
|
|
|
DIV元素1。
DIV元素2。
DIV元素3。
DIV元素4。
DIV元素5。
函数hs1（）
{
document.getElementById（“div1”）.style.display=“block”；
document.getElementById（“div2”）.style.display=“无”；
document.getElementById（“div3”）.style.display=“无”；
document.getElementById（“div4”）.style.display=“无”；
document.getElementById（“div5”）.style.display=“无”；
}
函数hs2（）
{
document.getElementById（“div1”）.style.display=“无”；
document.getElementById（“div2”）.style.display=“block”；
document.getElementById（“div3”）.style.display=“无”；
document.getElementById（“div4”）.style.display=“无”；
document.getElementById（“div5”）.style.display=“无”；
}
函数hs3（）
{
document.getElementById（“div1”）.style.display=“无”；
document.getElementById（“div2”）.style.display=“无”；
document.getElementById（“div3”）.style.display=“block”；
document.getElementById（“div4”）.style.display=“无”；
document.getElementById（“div5”）.style.display=“无”；
}
函数hs4（）
{
document.getElementById（“div1”）.style.display=“无”；
document.getElementById（“div2”）.style.display=“无”；
document.getElementById（“div3”）.style.display=“无”；
document.getElementById（“div4”）.style.display=“block”；
document.getElementById（“div5”）.style.display=“无”；
}
函数hs5（）
{
document.getElementById（“div1”）.style.display=“无”；
document.getElementById（“div2”）.style.display=“无”；
document.getElementById（“div3”）.style.display=“无”；
document.getElementById（“div4”）.style.display=“无”；
document.getElementById（“div5”）.style.display=“block”；
}
function hs(openPanel)
{
for (var x = 1; x <= 5; ++x)
{
document.getElementById("div" + x).style.display = ((x == openPanel) ? "block" : "none");
}
}
功能hs（openPanel）
{
对于（var x=1；x这个怎么样
演示：
HTML:
|
|
|
|
JavaScript:
function hs(divno){
for(var i = 1 ; i <=5 ; i++){
var display = (i == divno) ? "block":"none";
document.getElementById("div"+i).style.display = display;
}
return false;
}
功能hs（divno）{
因为（var i=1；i多亏了@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>
职能hs（部门编号）{
对于（var i=1；i Yikes，这是一些蹩脚的html。？真的吗？所以请帮助我做得更好：-）但它确实有效！谢谢你的帮助：-）谢谢你的帮助：-）
<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>