顯示/隱藏或切換同一類的多個元素，一次單擊僅顯示一個

Question

好的。 因此，我將盡力解釋這一點。 我只是不明白如何在HTML中使用jQuery，而對JavaScript的回答將是最好的選擇，但是如果您可以給我HTML，而不僅僅是jQuery代碼，我將使用jQuery。

我有一個指南頁面，該指南頁面本身是使用php（index.php？content = guide）嵌入到主頁中的。 在指南頁面上，我想使用顯示/隱藏或各種切換功能來切換頁面的某些部分（與指南相關）。 然后，我想一次只顯示一個，因為單擊了一個鏈接，所以只顯示被單擊的元素並隱藏其余元素。 列表在頁面的左側，而要顯示的內容在右側。

`http://jsfiddle.net/wesman2232/2m2jjcc9/`

（為什么不切換在jsfiddle上工作？在我的本地網絡服務器上工作正常）

通常，我只會為每個小節制作一個不同的php頁面（index.php？content = guide＆do = requirements），但我想嘗試擺脫這一點，所以我試圖將其放在一個整頁中

目前，它可以按我想要的方式進行切換，但是我寧願將它們全部放在一個腳本中，而不必寫出諸如show（'news'）之類的東西； show（'news2'）; hide（'updates'）; hide（'updates2'）; 同樣，如果您只是一直單擊“概要”，它將在兩者之間切換，而不僅僅是切換到那個和那個。

我知道這不是多重的，但是對於多重而言，我在媒體頁面上有這樣的內容：

`http://jsfiddle.net/wesman2232/mwnua9q8/`

除非我會將其從使用id更改為類，並將它們都設置為具有相同的類？

猜猜我需要回去重新學習一切，因為我很難把自己的大腦包裹在所有這些哈哈上。 我嘗試閱讀其他問題，但仍然無法按照我想要的方式工作。

Answer 1

我認為您的代碼存在問題，因為它已經過時了。 您正在使用tables進行非表格設計，與jQuery相比，您很難使用純JS。

您需要執行以下操作：

• divs tables並使用divs
• 使用CSS3樣式化內容的強大方法
• 即使知道普通的JS很好，也可以使用jQuery使編碼變得有趣而容易。
• 始終嘗試使用ID和類使HTML盡可能整潔

這是我重做代碼的方式：

 $(".link").click(function (e) { e.preventDefault(); $(".content").removeClass("active"); var content_id = $(this).attr("href"); $(content_id).addClass("active"); }); 

 #wrapper { text-align: center; } #content_container { margin-top: 10px; } .content:not(.active) { display: none; } .title{ font-weight:bold; text-transform: capitalize; font-size: 30px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div id="wrapper"> <div> <a class="link" href="#screenshots">Screenshots</a> | <a class="link" href="#videos">Videos</a> | <a class="link" href="#wallpaper">Wallpapers</a> </div> <div id="content_container"> <div id="screenshots" class="content active"> <div class="title">Screenshots</div> <div class="description">Screenshot description</div> </div> <div id="videos" class="content"> <div class="title">Videos</div> <div class="description">Videos description</div> </div> <div id="wallpaper" class="content"> <div class="title">Wallpapers</div> <div class="description">Wallpapers description</div> </div> </div> </div> 

Answer 2

嘗試這個。 這是一個jQuery版本。

    $().ready(function()
    {
   $('#gm, #pg').click(function()
{
    if($(this).attr("id") == "gm")
    {
        $("#gameinformation").toggle();
        if($("#playguide").is(":visible"))
        $("#playguide").toggle();
    }
    else
    {
        $("#playguide").toggle();
        if($("#gameinformation").is(":visible"))
        $("#gameinformation").toggle();
    }
});
    });

小提琴： http : //jsfiddle.net/2m2jjcc9/2/

替代方法：

如果要切換多個部分，則可以使用以下內容。 我使用了一種方法，使用名為“數據依賴”的屬性來標記“ a”的每個對應“ UL”標記，並使用它來切換部分。

$('a').click(function()
{
    var $this = $(this).attr('id');
    $('a').each(function()
    {
        var id = $(this).attr('id');
        if(id == $this)
        {           
             $("ul[data-dependency='" + id + "']").toggle();           
        }
        else            
        {
           if($("ul[data-dependency='" + id + "']").is(":visible"))
           $("ul[data-dependency='" + id + "']").toggle();
        }
    });
});

小提琴： http : //jsfiddle.net/2m2jjcc9/4/

根據需要保留所有菜單選項的更新：

$('a').click(function()
{    
    var $this = $(this).attr('id');
    if($("ul[data-dependency='" + $this + "']")[0] != undefined)
      $("ul[data-dependency='" + $this + "']").toggle();
    else
        $(this).closest('li').find('ul').toggle();
});

小提琴： http : //jsfiddle.net/2m2jjcc9/5/