大家好，我想隐藏一些div并在点击特定链接时显示其他div。
实际上我确实喜欢这个：
<html>
<head>
<script>
function loadA(){
document.getElementById("A").style.display="block";
document.getElementById("B").style.display="none";
document.getElementById("C").style.display="none";
document.getElementById("D").style.display="none";
}
function loadB(){
document.getElementById("A").style.display="none";
document.getElementById("B").style.display="block";
document.getElementById("C").style.display="none";
document.getElementById("D").style.display="none";
}
function loadC(){
document.getElementById("A").style.display="none";
document.getElementById("B").style.display="none";
document.getElementById("C").style.display="block";
document.getElementById("D").style.display="none";
}
function loadD(){
document.getElementById("A").style.display="none";
document.getElementById("B").style.display="none";
document.getElementById("C").style.display="none";
document.getElementById("D").style.display="block";
}
</script>
</head>
<body>
<div class="menu">
<a href="#" onclick="loadA()">A</a>
<a href="#" onclick="loadB()">B</a>
<a href="#" onclick="loadC()">C</a>
<a href="#" onclick="loadD()">D</a>
</div>
</body>
</html>
这对我有用，但是你认为这不是一个好习惯，并且确定还有另外一种比这更好的方法，你能告诉我吗？
答案 0 :(得分：6)
没有javascript的解决方案：
.container > div{
display:none
}
.container > div:target{
display:block
}<div class="menu">
<a href="#A" >A</a>
<a href="#B" >B</a>
<a href="#C" >C</a>
<a href="#D" >D</a>
</div>
<div class="container">
<div id="A" >A content</div>
<div id="B" >B content</div>
<div id="C" >C content</div>
<div id="D" >D content</div>
</div>
答案 1 :(得分：5)
您可以创建一个函数并为每个元素重用它：
function loadDiv(id){
document.getElementById("A").style.display="none";
document.getElementById("B").style.display="none";
document.getElementById("C").style.display="none";
document.getElementById("D").style.display="none";
document.getElementById(id).style.display="block";
}
并将正确的ID传递给每个onclick：
<div class="menu">
<a href="#" onclick="loadDiv('A')">A</a>
<a href="#" onclick="loadDiv('B')">B</a>
<a href="#" onclick="loadDiv('C')">C</a>
<a href="#" onclick="loadDiv('D')">D</a>
</div>
答案 2 :(得分：2)
这是你应该怎么做的。没有内联javascript，使用eventListener处理click事件并将所有元素与类包装在一起，使得编写和维护的代码更少：
JS：
function divLoader(e){
var hide = document.getElementsByClassName("hideAndShow");
for (var i = 0; i<hide.length;i++) {
hide[i].style.display="none";
}
document.getElementById(e.target.getAttribute('data-link')).style.display="block";
}
var anchors = document.querySelectorAll('.menu > a');
for (var i = 0; i<anchors.length; i++) {
anchors[i].addEventListener('click',divLoader);
}
HTML：
<div class="menu">
<a href="#" data-link="A">A</a>
<a href="#" data-link="B">B</a>
<a href="#" data-link="C">C</a>
<a href="#" data-link="D">D</a>
</div>
<div id="A" class="hideAndShow" style="display:none;">A</div>
<div id="B" class="hideAndShow" style="display:none;">B</div>
<div id="C" class="hideAndShow" style="display:none;">C</div>
<div id="D" class="hideAndShow" style="display:none;">D</div>
答案 3 :(得分：1)
在您有类似重复代码的情况下，您可以使用称为“抽象”的常用技术。主要思想是将公共代码转换为单个函数的参数，例如：
function loadByID(id){
document.getElementById("A").style.display="none";
document.getElementById("B").style.display="none";
document.getElementById("C").style.display="none";
document.getElementById("D").style.display="none";
document.getElementById(id).style.display="block";
}
然而，这仍然有点多余，对于较大的菜单和显示多个链接，您可以执行类似
的操作function loadByIDs(ids){
var links = document.getElementsByTagName("a");
for(var i = 0; i < links.length; i++){
document.getElementById(links[i].id).style.display = none;
}
for each(var id in ids){
document.getElementById(id).style.display = block;
}
}
当你有太多的链接并希望一次显示多个链接时（这样你需要传入一个数组），这会更好用。
注意：如果你正在使用Jquery，你可以使用.each（）函数来摆脱第一个for循环
希望这有帮助！
答案 4 :(得分：1)
我认为在您的情况下，最佳做法是定义一个通用函数，但在我的示例中，类class中具有特定link的链接数量，请查看 Working Fiddle
现在你的脚本将使用div中添加的动态链接，你只需添加html而不触及js将检测到更改。
HTML：
<div class="menu">
<a href="#" class="link" onclick="load(event)">A</a>
<a href="#" class="link" onclick="load(event)">B</a>
<a href="#" class="link" onclick="load(event)">C</a>
<a href="#" class="link" onclick="load(event)">D</a>
</div>
JS：
load = function(e){
//select all links
var links = document.getElementsByClassName('link');
//Hide all the links
for (i = 0; i < links.length; i++) {
links[i].style.display = "none";
}
//Show clicked link
e.target.style.display = "block";
}
希望这会让人感觉良好。
答案 5 :(得分：0)
HTML
<body>
<div id="main">
<ul id="nav">
<li><a href="#" id="show_home">Home</a></li>
<li><a href="#" id="show_about">About Us</a></li>
</ul>
<div id="container">
<div id="wrapper">
<div class="content">
<div id="menu_home">
<h2>Menu 1</h2>
</div>
<div id="menu_about">
<h2>Menu 2</h2>
</div>
</div><!--content-->
</div><!--wrapper-->
</div><!--container-->
</div><!-- main-->
</body>
JS
$(document).ready(function(){
$("#menu_home").slideUp("fast");
$("#menu_about").slideUp("fast");
$("#menu_home").show();
$("#nav a").click(function(){
var id = $(this).attr('id');
id = id.split('_');
$(".content div").slideUp("fast");;
$(".content #menu_"+id[1]).slideToggle("fast");
});
}）;
以下是example
答案 6 :(得分：0)
function loadA()
{
document.getElementById("A").style.visiblity="show";
document.getElementById("B").style.visiblity="hide";
document.getElementById("C").style.visiblity="hide";
document.getElementById("D").style.visiblity="hide";
}
如果可见性不起作用，只需将可见性关键字更改为可见，然后隐藏隐藏。
还有一件事，你不应该为每个div编写函数..你可以做什么只传递你想要显示和隐藏其他人的div的id。见下文
function trigger(id)
{
var alldiv={"A","B","C","D"};
for(i=0;i<alldiv.length;i++)
{
if(alldiv[i]==id)
document.getElementById(id).style.visiblity="show";
else
document.getElementById(alldiv[i]).style.visiblity="hide";
}
}