JQuery Показать один DIV и скрыть еще четыре divs

-4

Как я могу сделать это, когда я нажму на одну ссылку, покажу эту ссылку, но скройте другие.JQuery Показать один DIV и скрыть еще четыре divs

Вот мой код: 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

В этой связи и может найти свой код :) http://www.bootply.com/DoQ0OoQu0w – albaneso

Что делать, если Bootply вниз, или идет далеко? Вы должны * всегда * размещать свой код в вопросе. – j08691

-2

участки ненужного кода в вашем bootply.

проверить это (просто более разумный способ ...) http://www.bootply.com/xbuIkoiQZJ

источник

2014-10-01 21:17:03 void

Отметьте этот более умный способ ответа: http://stackoverflow.com/help/how-to-answer – LcSalazar

Что не так, что вы нашли в моем способ ответа? – void

Пустое спасибо за потерянное для ответа, ваш ответ был прекрасен, что я искал, но у этого парня @LcSalazar есть серьезные манеры. Удачного дня ребята – albaneso

Посмотрите здесь:

http://www.bootply.com/JJYUDyFJft

В принципе, вместо того, все избыточного кода в вашем примере это лучший способ иметь активное изменение класса при каждом нажатии на вкладку.

Также обратите внимание на использование атрибута переключения данных.

Вам по-прежнему нужно будет добавить содержимое, на которое будут отображаться вкладки.

источник

2014-10-01 21:17:21 adanot

Это не то, что им нужно, он должен обновить весь div не только активным классом – albaneso

JQuery Показать один DIV и скрыть еще четыре divs

ответ

Смежные вопросы