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

-4

我怎样才能使它当我点击一个链接，显示该链接，但隐藏另一个。JQuery显示一个DIV并隐藏另外四个div

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

来源

2014-10-01 albaneso

不提供链接...提供代码... – LcSalazar 2014-10-01 21:12:59

在这个环节u能找到我的代码:) http://www.bootply.com/DoQ0OoQu0w – albaneso 2014-10-01 21:14:34

如果Bootply已关闭，或去远？您应该*总是*在问题中发布您的代码。 – j08691 2014-10-01 21:16:01

-2

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

检查了这一点（只是一个更聪明的方式...）http://www.bootply.com/xbuIkoiQZJ

来源

2014-10-01 21:17:03 void

看看这个更聪明的方式回答：http://stackoverflow.com/help/how-to-answer – LcSalazar 2014-10-01 21:17:54

你在我的发现有什么不对回答方式？ – void 2014-10-01 21:22:12

无效感谢您的回复失败，您的回答是我所期待的完美，但这家伙@LcSalazar有一些严肃的举止。祝你今天有个美好的一天 – albaneso 2014-10-01 21:25:26

到这里看看：

http://www.bootply.com/JJYUDyFJft

基本上而不是在你的榜样所有冗余代码的它是一个更好的方法来让每个选项卡上的活动类更改点击。

另请注意使用数据切换属性。

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

来源

2014-10-01 21:17:21 adanot

这不是什么即时通讯寻找，它应该刷新整个div不仅是活跃的类 – albaneso 2014-10-01 21:21:42

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

回答

相关问题