Question

好的。所以我会尽力解释这个问题。我只是不明白如何在HTML中使用jQuery并且javascript答案将是最受欢迎的，但如果你能用它给我HTML，而不仅仅是jQuery代码，我将采用jQuery。

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

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

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

通常情况下，我会为每个子部分创建一个不同的php页面（index.php？content = guide＆amp; do = requirements）但是我想尝试远离它，所以我试图让它得到它在一整页

目前，它会像我想要的那样切换，但我宁愿在一个脚本中全部使用它，而不必写出类似show（'news'）的东西;节目（ '新闻2'）;隐藏（ '更新'）;隐藏（ 'updates2'）;等等。如果你只是一直点击概要它会在两者之间切换，而不是只切换到那一个，而只是那个。

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

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

除了我将它从使用id更改为类并将它们设置为具有相同类的权利？

猜猜我需要回去重新学习一切，因为我很难将我的大脑缠绕在这一切哈哈身上。我已经尝试过阅读其他问题，但仍然无法按照我想要的方式工作。

Answer 1

在我看来，您的代码存在的问题是它已经过时了。您正在使用tables进行非表格设计，并且与jQuery相比，您使用纯JS会让自己变得困难。

您需要执行以下操作：

取消tables并使用divs
使用CSS3设置内容样式的强大方法
即使知道普通JS非常好，也可以使用jQuery使编码变得轻松有趣。
始终尝试使用ID和类

这是我重做代码的方式：

$(".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'标签，并使用一个名为'data-dependency'的属性，并用它来切换部分。

$('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/

显示/隐藏或切换具有相同类的多个元素，仅在单击

2 个答案: