Question

您好我试图弄清楚如何使用多个链接隐藏和显示内容。实施例

<a href="#">Content 1</a>
<a href="#">Content 2</a>
<a href="#">Content 3</a>

<div class="show">content #1</div>
<div class="hidden">content #2</div>
<div class="hidden">content #3</div>

因此，当有人点击内容＃2时，它会显示内容＃2并隐藏内容＃1

Answer 1

你的链接和div只有最松散的挂钩来悬挂这种行为。也许你的确意味着通过序数位置将链接与它们各自的div相关联 - 但如果没有，一种方法可以通过添加一些有意义的id来实现。所以：

<div id="linkarea">
    <a href="#" id="link-1">Content 1</a>
    <a href="#" id="link-2">Content 2</a>
</div>

然后

<div id="contentarea">
    <div id="c-1">content #1</div>
    <div id="c-2">content #2</div>
</div>

使其有效：

$('div#linkarea a').click( function(ev){
    ev.preventDefault(); // suppress natural click
    var idx = this.id.split('-')[1]; // grab the link "number"
    $('div#contentarea div[id=c-'+idx+']') // find respective div
        .show() // show it
        .siblings() // get its siblings
        .hide(); // and hide them
    });
});

这是一个有效的fiddle。

Answer 2

我会以稍微不同的方式处理这个问题。

不是在HTML中包含链接，而是使用javascript生成它们。这样，如果有人禁用了JS，那么他们就不会看到无用的链接。

<div title="Content 1">content #1</div>
<div title="Content 2">content #2</div>
<div title="Content 3">content #3</div>

然后JS：

var $divs = $('div'); // or whatever selector is appropriate, maybe classes are needed?
var $linkDiv = $("<div></div>").insertBefore($divs);

$divs.each(function(index) {
    var $t = $(this);
    $("<a></a>", { href: '#', text: this.title })
        .click(function(e) {
            e.preventDefault();
            $t.toggle('slow');
        })
        .appendTo($linkDiv)
    ;
    this.removeAttribute('title');  // to avoid ugly hover tooltips
    if (index > 0) $t.hide();
});

Answer 3

尝试.toggle（）和.hide（）

http://api.jquery.com/toggle/

http://api.jquery.com/hide/

这些页面上有一些例子涵盖了你想要做的事情。

使用Jquery隐藏和显示相同的div

3 个答案: