JQuery 하나의 DIV 표시하고 네 개의 다른 div를 숨기기

-4

하나의 링크를 클릭하면 링크를 표시하지만 다른 링크는 숨길 수 있습니다. Bootply 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

이 링크에서 내 코드를 찾을 수 있습니다. http://www.bootply.com/DoQ0OoQu0w – albaneso

Bootply가 다운되었거나 진행되면 어떻게됩니까? 떨어져? 항상 질문에 코드를 게시해야합니다. – j08691

-2

많이.

확인이을 (단지 똑똑한 방법 ...) http://www.bootply.com/xbuIkoiQZJ

출처

2014-10-01 21:17:03 void

더 똑똑한 응답 방법을 확인하십시오. – LcSalazar

내 잘못을 발견했습니다. 대답하는 방법? – void

답장을 보내 주셔서 감사합니다. 답은 완벽했습니다. 그러나이 사람 @LcSalazar는 심각한 매너를 가지고 있습니다. 좋은 하루 보내십시오 – albaneso

여기를보세요 :

http://www.bootply.com/JJYUDyFJft

을 기본적으로 대신 예에 중복 모든 코드를 가지고의 그것은이다 각 탭을 클릭 할 때마다 활성 클래스를 변경하는 더 나은 방법입니다.

또한 data-toggle 속성의 사용에 주목하십시오.

여전히 탭이 이동할 콘텐츠를 추가해야합니다.

출처

2014-10-01 21:17:21 adanot

이것은 무엇을 찾고있어, 그것은 전체 div뿐만 아니라 활성 클래스를 새로 고쳐야한다 – albaneso

JQuery 하나의 DIV 표시하고 네 개의 다른 div를 숨기기

답변

관련 문제