javascript - 根据链接的点击 href 显示/隐藏元素

Question

我是 JavaScript 的新手，现在真的很绝望

我有一个 HTML 文件:

1. 从 XML 文件中获取数据并将它们显示在各种 div 中(例如 )
2. 这些 div 被类名 (class='box') 隐藏(默认情况下)
3. 单击链接时，我将“href”传递给函数 showContent，删除 #，然后在文档中查找具有该 ID 的元素。
4. 然后我添加一个新的类名('show')——这样这个元素就会显示出来!

如果您运行代码，您会发现每次单击链接时都会显示一个新的 div...

所以目前的问题:

1. 用新的点击 ID 替换已经显示的 div，这样每次只显示一个 div。
2. 如何避免在每个标签中插入 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>

Answer 1

我通常不会到处使用 jQuery，但是有了它你就可以做到:

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

你的代码:

var selected;

$('a.showContent').on('click',function(e){
     var toShow = $(this).attr('data');
     if(selected!==undefined) selected.removeClass('Show');
     selected = $(div+'#'+toShow);
     selected.addClass('Show');
 });

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