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

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>

工作演示