gpt4 book ai didi

javascript - 一个网页一次只打开1个分区的脚本

转载 作者:太空宇宙 更新时间:2023-11-04 13:25:51 25 4
gpt4 key购买 nike

一次只打开1个分区的html/css/js脚本

这个脚本完美运行!在花了几天时间寻找更专业的代码后,我将它放在一起——它不需要任何资源文件,它很简单——但它的代码很丑。如何在不添加 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> &nbsp;&nbsp;
<button onclick="hs2()"> Content div2
</button> &nbsp;&nbsp;
<button onclick="hs3()"> Content div3
</button> &nbsp;&nbsp;
<button onclick="hs4()"> Content div4
</button> &nbsp;&nbsp;
<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>

最佳答案

这个怎么样
演示:http://jsfiddle.net/naokiota/frnDq/4/

HTML:

<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>

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;
}

关于javascript - 一个网页一次只打开1个分区的脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23729240/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com