显示/隐藏或切换具有相同类的多个元素，单击时一次只显示一个 - Show/Hide OR Toggle multiple elements with same class, only show one at a time on click

>好吧。所以我将尽我所能地解释这一点。我只是不明白如何在HTML中使用jQuery，并且JavaScript的答案将不胜感激，但是如果您可以给我HTML并且不仅仅是jQuery代码，我会选择jQuery。

我有一个指南页面，指南页面本身使用 php 嵌入到主页中(索引.php？内容=指南(。在指南页面上，我想使用显示/隐藏或各种切换功能来切换页面的某些部分，与指南相关。然后，我一次只想显示一个，因为单击一个链接，仅显示单击的元素并隐藏其余元素。列表位于页面左侧，而要显示的内容位于右侧。

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

(为什么切换不在 jsfiddle 上工作？它在我的本地网络服务器上工作正常(

通常我只会为每个小节(索引.php？内容=指南&do=要求(制作一个不同的php页面，但我想尝试摆脱它，所以我试图把它放在一个完整的页面中

目前，它可以像我想要的那样切换，但我宁愿在一个脚本中全部使用，而不必写出诸如show('news'(; show('news2'(; hide('updates'(; hide('updates2'(; 等等。此外，如果您只是一直单击概要，它会在两者之间切换，而不仅仅是切换到那个，而且只切换到那个。

我知道这不是多个，但对于多个部分，我在媒体页面上有这样的东西：

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

除了我会将其从使用 id 更改为类并将它们都设置为具有相同的类吗？

猜

猜我需要回去重新学习一切，因为我很难把我的大脑包裹在这一切上哈哈。我尝试阅读其他问题，但仍然无法让它按照我想要的方式工作。

在我看来，你的代码的问题在于它已经过时了。你正在使用tables进行非表格设计，与jQuery相比，你使使用纯JS变得困难。

您需要执行以下操作：

取消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>

试试这个。这是一个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/