Question

当我点击一个链接，显示该链接但隐藏另一个链接时，我该怎么做呢。

这是我的代码： 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>

Answer 1

看看这里：

http://www.bootply.com/JJYUDyFJft

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

另请注意data-toggle属性的使用。

您仍需要添加标签页的内容。

Answer 2

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

检查一下（只是一种更聪明的方式......）http://www.bootply.com/xbuIkoiQZJ

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

2 个答案: