Javascript 基于链接的点击href显示/隐藏元素

我对JavaScript还不熟悉，实际上现在已经非常绝望了

我有一个HTML文件：

从XML文件获取数据，并将其显示在不同的div中（例如）

这些div（默认情况下）由类名（class='box'隐藏）

单击链接时，我将“href”传递给函数showContent，删除#，然后在文档中查找具有该ID的元素

然后我添加了一个新的类名（'show'）——这样这个元素就出现了 如果您运行代码，您将看到每次单击链接时都会显示一个新的div

因此，当前的问题是：

用新的单击ID替换已显示的div，以便每次只显示一个div

如何避免在每个标记中插入onClick事件，并使其更加自动化

---

我的代码如下：

function showContent(obj)
{
var linkTo = obj.getAttribute("href");
var newlinkTo=linkTo.replace('#','');
//alert (newlinkTo);

document.getElementById(newlinkTo).innerHTML=" This is where the xml variable content should go";   
document.getElementById(newlinkTo).className += " Show";

return true;
}

<a href="#b0" onClick="return showContent(this);">
<div id="text_content"> link2 </div>
</a>

<a href="#b1" onClick="return showContent(this);">
<div id="text_content"> link 1 </div>
</a>

<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>

功能显示内容（obj）
{
var linkTo=obj.getAttribute（“href”）；
var newlinkTo=linkTo.replace（'#'，''）；
//警报（newlinkTo）；
document.getElementById（newlinkTo）.innerHTML=“这是xml变量内容应该去的地方”；
document.getElementById（newlinkTo）.className+=“Show”；
返回true；
}
摘要内容
导言内容

我通常不喜欢在任何地方使用jQuery，但有了它，您可以：

<a class='showContent' data='b0'/>

---

不确定这是否是您想要的，但我想我会建议您使用它。

我通常不喜欢在任何地方使用jQuery，但使用它您可以：

<a class='showContent' data='b0'/>

---

不确定这是否是您想要的，但我想我会建议您这样做。

没有jQuery，这类事情并不难做到

我建议对Javascript激活的链接使用hash bang（#！），以使其与其他可能的带有哈希的链接分开。（脚本位于底部）

摘要内容
导言内容
var links=document.getElementById（'nav-links'）.getElementsByTagName（'a'）；
for（var i=0，link；link=links[i]；i++）{
link.onclick=showContent；
//默认情况下隐藏内容div
getContentDiv（link.style.display='none'；
}
//显示第一个内容div
如果（links.length>0）showContent.apply（links[0]）；
无功电流；
函数showContent（）{
//隐藏旧内容
如果（当前）current.style.display='none'；
当前=getContentDiv（此）；
如果（！current）返回true；
//current.innerHTML=“这是xml变量内容应该去的地方”；
current.style.display='block'；
返回true；
}
函数getContentDiv（链接）{
var linkTo=link.getAttribute（'href'）；
//确保链接指向div
if（linkTo.substring（0，2）！='#！'）返回；
链接到=链接到子字符串（2）；
返回文档.getElementById（linkTo）；
}
​
没有jQuery，这类事情并不难做到

我建议对Javascript激活的链接使用hash bang（#！），以使其与其他可能的带有哈希的链接分开。（脚本位于底部）


摘要内容
导言内容
var links=document.getElementById（'nav-links'）.getElementsByTagName（'a'）；
for（var i=0，link；link=links[i]；i++）{
link.onclick=showContent；
//默认情况下隐藏内容div
getContentDiv（link.style.display='none'；
}
//显示第一个内容div
如果（links.length>0）showContent.apply（links[0]）；
无功电流；
函数showContent（）{
//隐藏旧内容
如果（当前）current.style.display='none'；
当前=getContentDiv（此）；
如果（！current）返回true；
//current.innerHTML=“这是xml变量内容应该去的地方”；
current.style.display='block'；
返回true；
}
函数getContentDiv（链接）{
var linkTo=link.getAttribute（'href'）；
//确保链接指向div
if（linkTo.substring（0，2）！='#！'）返回；
链接到=链接到子字符串（2）；
返回文档.getElementById（linkTo）；
}
​
有一种方法可以做到这一点：

这只是我的一个简单示例，它可以比这更干净，但这对您的情况有效：

HTML:

<a href="#b0" id="b0-link" class="link" rel="b0">link b0</a>

<a href="#b1" id="b1-link" class="link" rel="b1">link b1</a>

<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>​​​​​​​​​

JQUERY：

​$('.link').click(function(){
    var id = $(this).attr("rel");

    $('#'+id).slideToggle('slow');                      
});

​
每个链接都必须有一个REL属性，该属性与您试图显示的div元素的ID相同

下面是这个示例的一个JSFIDLE：

有一种方法可以做到这一点：

这只是我的一个简单示例，它可以比这更干净，但这对您的情况有效：

HTML:

<a href="#b0" id="b0-link" class="link" rel="b0">link b0</a>

<a href="#b1" id="b1-link" class="link" rel="b1">link b1</a>

<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>​​​​​​​​​

JQUERY：

​$('.link').click(function(){
    var id = $(this).attr("rel");

    $('#'+id).slideToggle('slow');                      
});

​
每个链接都必须有一个REL属性，该属性与您试图显示的div元素的ID相同

下面是这个示例的一个JSFIDLE：

可能不感兴趣，但JQuery是实现这些功能的相对简单的方法。可能不感兴趣，但JQuery是实现这些功能的相对简单的方法。您好，wnwall，很抱歉，您的脚本无法正常工作。当单击任何链接时，for循环都不会调用任何内容。我甚至尝试了一个简单的提醒，但不起作用…但是//隐藏旧内容位起作用。。。我不明白怎么（？）虽然。。。你能解释一下if（当前）的含义吗。。。陈述这是IF语句的某种快捷方式吗？我不明白它是如何理解显示/隐藏什么的，因为这是同一个变量：current=ocument.getElementById（linkTo）…我再次。。。好的，我想我明白了。。。current.style.display='none'第一次将不起作用，因为它没有值。但是从第二次开始就可以了…很抱歉。我已经更新了我的代码，使其按预期工作。这里是一个JSFIDLE演示：是的，您是正确的。
if（current）
行只是检查
current
变量中是否存储了任何值。您好，wnwall，很抱歉，无法将脚本设置为w