javascript - 显示/隐藏或切换具有相同类别的多个元素，单击时一次只显示一个

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'); 这样的东西。显示('新闻2');隐藏('更新');隐藏('更新2');等等等等。此外，如果您只是一直点击 Synopsis，它会在两者之间切换，而不是仅仅切换到那个，而且只切换到那个。

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

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

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

我想我需要回去重新学习所有内容，因为我很难全神贯注于这一切哈哈。我已尝试阅读其他问题，但仍无法按照我希望的方式进行。

Answer 1

在我看来，您的代码的问题在于它已经过时了。您正在使用 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>