JQuery 显示一个 DIV 并隐藏另外四个 div答案

【问题标题】：JQuery Show one DIV and hide four another divsJQuery 显示一个 DIV 并隐藏另外四个 div
【发布时间】：2014-11-26 20:16:03
【问题描述】：

当我点击一个链接时，我怎样才能做到这一点，显示该链接但隐藏另一个链接。

这是我的代码： Bootply

它工作正常，但是当我点击一个链接后，我无法导航到其他链接，它卡在那里。抱歉，代码太长了

  <head>
    <script type="text/javascript">
$(document).ready(function(){
    $("#output2").hide();
    $("#output3").hide();
    $("#output4").hide();
    $("#output5").hide();

    $("#home2").click(function(e){
        e.preventDefault();
        $("#output1").hide();
        $("#output2").show();
        $("#output3").hide();
        $("#output4").hide();
        $("#output5").hide();
    })
    $("#home3").click(function(e)
    {
        e.preventDefault();
        $("#output1").hide();
        $("#output2").hide();
        $("#output3").show();
        $("#output4").hide();
        $("#output5").hide();
    });
    $("#home4").click(function(e)
    {
        e.preventDefault();
        $("#output1").hide();
        $("#output2").hide();
        $("#output3").hide();
        $("#output4").show();
        $("#output5").hide();
    });
    $("#home5").click(function(e)
    {
        e.preventDefault();
        $("#output1").hide();
        $("#output2").hide();
        $("#output3").hide();
        $("#output4").hide();
        $("#output5").show();
    });

});

    </script>
    </head>
    <body>
    <div id="output1">
        <ul class="nav nav-tabs nav-justified" role="tablist">
            <li class="active"><a href="#" id="home1">Home1</a></li>
            <li><a href="#" id="home2">Home2</a></li>
            <li><a href="#" id="home3">Home3</a></li>
            <li><a href="#" id="home4">Home4</a></li>
            <li><a href="#" id="home5">Home5</a></li>
        </ul>
        <div class="jumbotron" style="background-color:white;border-left:1px solid #dddddd;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;">
            <p>Home1</p>
        </div>
    </div>
    <div id="output2">
        <ul class="nav nav-tabs nav-justified" role="tablist">
            <li><a href="#" id="home1">Home1</a></li>
            <li  class="active"><a href="#" id="home2">Home2</a></li>
            <li><a href="#" id="home3">Home3</a></li>
            <li><a href="#" id="home4">Home4</a></li>
            <li><a href="#" id="home5">Home5</a></li>
        </ul>
        <div class="jumbotron" style="background-color:white;border-left:1px solid #dddddd;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;">
            <p>Home2</p>
        </div>
    </div><div id="output3">
        <ul class="nav nav-tabs nav-justified" role="tablist">
            <li><a href="#" id="home1">Home1</a></li>
            <li><a href="#" id="home2">Home2</a></li>
            <li  class="active"><a href="#" id="home3">Home3</a></li>
            <li><a href="#" id="home4">Home4</a></li>
            <li><a href="#" id="home5">Home5</a></li>
        </ul>
        <div class="jumbotron" style="background-color:white;border-left:1px solid #dddddd;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;">
            <p>Home3</p>
        </div>
    </div><div id="output4">
        <ul class="nav nav-tabs nav-justified" role="tablist">
            <li><a href="#" id="home1">Home1</a></li>
            <li><a href="#" id="home2">Home2</a></li>
            <li><a href="#" id="home3">Home3</a></li>
            <li  class="active"><a href="#" id="home4">Home4</a></li>
            <li><a href="#" id="home5">Home5</a></li>
        </ul>
        <div class="jumbotron" style="background-color:white;border-left:1px solid #dddddd;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;">
            <p>Home4</p>
        </div>
    </div>
    <div id="output5">
        <ul class="nav nav-tabs nav-justified" role="tablist">
            <li><a href="#" id="home1">Home1</a></li>
            <li><a href="#" id="home2">Home2</a></li>
            <li><a href="#" id="home3">Home3</a></li>
            <li><a href="#" id="home4">Home4</a></li>
            <li  class="active"><a href="#" id="home5">Home5</a></li>
        </ul>
        <div class="jumbotron" style="background-color:white;border-left:1px solid #dddddd;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;">
            <p>Home5</p>
        </div>
    </div>
    </body>

【问题讨论】：

不提供链接...提供代码...
在这个链接中你可以找到我的代码:) bootply.com/DoQ0OoQu0w
如果 Bootply 关闭或消失了怎么办？您应该始终在问题中发布您的代码。
我们不应该去任何地方查看您的代码。它应该在你的帖子上。
StackOverflow 不是为了今天，而是为了帮助未来的其他人......如果您的链接将来不可用怎么办？

标签： javascript jquery twitter-bootstrap

【解决方案1】：

看这里：

http://www.bootply.com/JJYUDyFJft

基本上不是在您的示例中包含所有冗余代码，而是在每次单击选项卡时更改活动类是一种更好的方法。

还要注意 data-toggle 属性的使用。

您仍然需要添加选项卡将转到的内容。

【讨论】：

这不是我要找的，它应该刷新整个 div 而不仅仅是活动类

【解决方案2】：

你的 bootply 中有很多不必要的代码。

看看这个（只是一个更聪明的方法......）http://www.bootply.com/xbuIkoiQZJ

【讨论】：

看看这个更聪明的回答方式：stackoverflow.com/help/how-to-answer
Void 感谢丢失的回复，您的答案是我想要的完美答案，但是@LcSalazar 这个人有一些严肃的举止。祝你有美好的一天
阅读关于 OP 问题的 cmets... 这同样适用于您的答案。永远不要只给出代码答案，因为它可能变得无用。
@LcSalazar 实际上他确实帮了我很多，而且显然没用
@albaneso - 很高兴你解决了你的问题，但请记住，这个网站不只是为你准备的……如果 bootply，你认为这篇文章将来会对多少人有所帮助倒下了……？