Question

我已经在堆栈上查看了我可以应用的答案，但我对javascript并不满意。

我有一个需要显示隐藏div的链接列表。很容易。但是大约有8个链接，div必须占用相同的空间。因此，当您单击链接1（链接1的div出现），然后单击链接2时，我需要链接1的div消失，链接2的div显示。

目前，我正在使用jQuery的切换功能来获得我正在寻找的效果，但您必须再次点击该链接以再次隐藏信息。

任何想法都将不胜感激！

Answer 1

如果没有任何语法可以使用，您应该可以使用以下内容：

隐藏链接本身：

//When a link is clicked...
$(".yourlink").click(function(){
     //Hide all of the links
     $(".yourlink").hide();
     //Show the selected link
     $(this).show();
});

同样，如果您想使用div： （使用下面包含的HTML）

//Javascript 
$(".link").click(function()
{
    $('div').hide();
    $('#'+$(this).attr('name')).show();   
});

//HTML
<a class='link' name='1'>Link 1</a>
<a class='link' name='2'>Link 2</a>
<a class='link' name='3'>Link 3</a>
<a class='link' name='4'>Link 4</a>
<a class='link' name='5'>Link 5</a>
<a class='link' name='6'>Link 6</a>
<a class='link' name='7'>Link 7</a>
<a class='link' name='8'>Link 8</a>

<div id='1'>1</div>
<div id='2'>2</div>
<div id='3'>3</div>
<div id='4'>4</div>
<div id='5'>5</div>
<div id='6'>6</div>
<div id='7'>7</div>
<div id='8'>8</div>

<强> Working Demo

Answer 2

使用.show（）显示和.hide（）隐藏，而不是切换。

Answer 3

在这种情况下，您可以采取两种简单的方法。

利用CSS帮助切换可见性。
在jQuery中使用show() / hide()。

我建议使用CSS类来帮助您完成请求。创建一个类.showObject { display: block; }和另一个.hideObject { display: none; }。获得类后，可以使用jQuery函数addClass()和removeClass()来修改显示属性。

Answer 4

    <a href="#" class="hider">link 1</a>
    <div id="div1" class="content" style="display:none;">
    </div>

    <a href="#" class="hider">link 2</a>
    <div id="div2" class="content" style="display:none;">
    </div>

    <a href="#" class="hider">link 3</a>
    <div id="div3" class="content" style="display:none;">
    </div>

    <a href="#" class="hider">link 4</a>
    <div id="div4" class="content" style="display:none;">
    </div>

    $(".hider").click(function(event){
        $(".content").hide();
        $(this).next().show();


    });

隐藏所有div并用jquery显示一个

4 个答案: