隱藏所有的div和用jquery顯示一個

我在堆棧上瀏覽了一個可以應用的答案，但是我對javascript並不滿意。隱藏所有的div和用jquery顯示一個

我有一個需要顯示隱藏div的鏈接列表。很簡單。但是，這些鏈接中有大約8個必須佔據相同的空間。因此，當你點擊鏈接1（鏈接1的div出現），然後你點擊鏈接2，我需要鏈接1的div消失並且鏈接2的div出現。

目前，我正在使用jQuery的切換功能來獲得我正在尋找的效果，但是您必須單擊該鏈接兩次以再次隱藏信息。

任何想法將不勝感激！

來源

2011-08-30 Critologist

如果您想要最佳/最快/最相關的幫助，請顯示您的html和您的代碼。 – jfriend00

沒有有任何語法一起工作，你應該能夠使用類似以下內容：

要隱藏鏈接本身：

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

來源

2011-08-30 15:31:13

+1不錯，簡單... – Jakub

你隱藏並顯示鏈接（一）不是div。 – BZink

@BZink - 我不確定他最初在找什麼。該演示在其實現中使用div。 –

相反肘節的，使用.show（）來顯示和.hide（）隱藏。

來源

2011-08-30 15:31:55

在這種情況下，您可以採取兩種簡單的方法。

利用CSS來幫助切換可見性。
在jQuery中利用show()/hide()。

我會建議的是利用CSS類來幫助您完成您的請求。創建一個類.showObject { display: block; }和另一個.hideObject { display: none; }。一旦你有了類，你可以利用jQuery的功能addClass()和removeClass()來修改顯示屬性。

來源

2011-08-30 15:33:51 RobB

<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(); 


    });

來源

2011-08-30 15:36:00 BZink

隱藏所有的div和用jquery顯示一個

回答

相關問題