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

Question

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

我有一个 HTML 文件：

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

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

所以目前的问题：

1. 将已经显示的 div 替换为新的点击 ID，这样每次只显示一个 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'/>

你的js：

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

不确定这是否是你想要的，但我想我会推荐它。

Answer 2

这种事情不用jQuery也不难做到。

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

<div id="nav-links">

    <a href="#!b0">
    <div id="text_content"> link2 </div>
    </a>

    <a href="#!b1">
    <div id="text_content"> link 1 </div>
    </a>

</div>

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

<script type="text/javascript">

    var links = document.getElementById('nav-links').getElementsByTagName('a');
    for(var i = 0, link; link = links[i]; i++) {
        link.onclick = showContent;
        // Hide content divs by default
        getContentDiv(link).style.display = 'none';
    }
    // Show the first content div
    if(links.length > 0) showContent.apply(links[0]);

    var current;

    function showContent() {

        // hide old content
        if(current) current.style.display = 'none';

        current = getContentDiv(this);
        if(!current) return true;

        //current.innerHTML = "This is where the xml variable content should go";
        current.style.display = 'block';

        return true;

    }

    function getContentDiv(link) {

        var linkTo = link.getAttribute('href');

        // Make sure the link is meant to go to a div
        if(linkTo.substring(0, 2) != '#!') return;
        linkTo = linkTo.substring(2);

        return document.getElementById(linkTo);

    }

</script>​

Answer 3

有一种更清洁的方法可以做到这一点：

这只是我的简单示例，它可以比这更干净，但这适用于您的情况：

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

CSS：

#b0 { display: none; }

#b1 { display: none; }

a, div.text_content { display: inline; padding: 0 10px; }

查询：

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

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

​ 每个链接都必须具有与您尝试显示的 div 元素的 ID 相同的 REL 属性。

下面是这个示例的 JSFiddle：

http://jsfiddle.net/CUJSM/5/