2012-12-02 8 views
1

저는 부트 스랩에 초보자입니다. 전환 가능한 태그가있는 페이지를 만들기 위해 코드를 사용하려고했습니다. 그러나 여러 번 코드를 검사했지만 코드에서 문제를 찾을 수 없습니다. 아무도 도와주지 않을 래? 당신은 필요가 없습니다부트 스트랩 토글 태그

<div class="row"> 

    <div class="tabbable"> 

    <ul class="nav nav-tabs" id="tabs" data-tabs="tabs"> 
     <li class="active"><a href="#having_a" data-toggle="tab">Having a</a></li> 
     <li><a href="#having_b" data-toggle="tab">Having b</a></li> 
     <li><a href="#having_c" data-toggle="tab">Having c</a></li> 
    </ul> 

    <!-- content of the tab --> 
    <div class="tab-content" id="tab-content"> 

     <div class="tab-pane active" id="having_a"> 
     <p>a</p> 
     </div> 

     <div class="tab-pane" id="having_b"> 
     <p>b</p> 
     </div> 

     <div class="tab-pane" id="having_c"> 
     <p>c</p> 
     </div> 

    </div> 

    </div> 

    <script type="text/javascript"> 
    jQuery(document).ready(function ($) {$('#tabs').tab(); }); 
    </script>  

    </div>  

    <hr> 

    <footer> 
    <p>&copy;2012</p> 
    </footer> 

</div> <!-- /container --> 

<!-- Le javascript 
================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="js/jquery.js"></script> 
<script src="js/bootstrap-transition.js"></script> 
<script src="js/bootstrap-alert.js"></script> 
<script src="js/bootstrap-modal.js"></script> 
<script src="js/bootstrap-dropdown.js"></script> 
<script src="js/bootstrap-scrollspy.js"></script> 
<script src="js/bootstrap-tab.js"></script> 
<script src="js/bootstrap-tooltip.js"></script> 
<script src="js/bootstrap-popover.js"></script> 
<script src="js/bootstrap-button.js"></script> 
<script src="js/bootstrap-collapse.js"></script> 
<script src="js/bootstrap-carousel.js"></script> 

답변

1

  1. ID = "myTab"
  2. 삽입 $의 .tab ('쇼')에서 함수를 포함 예를

    에 대한

<ul class="nav nav-tabs id="myTab"> 
     <li class="active"><a href="#having_a" data-toggle="tab">Having a</a></li> 
     <li><a href="#having_b" data-toggle="tab">Having b</a></li> 
     <li><a href="#having_c" data-toggle="tab">Having c</a></li> 
    </ul> 

<script> 
    $(function() { 
    $('#myTab').tab('show'); 
    }) 
</script> 

http://twitter.github.com/bootstrap/javascript.html#tabs

+0

내 코드를 업데이트하고 스크립트 기능을 추가,하지만 여전히 작동하지 않습니다했다. – user1869816

+1

나는 데이터 토글 = "탭"을 정의했고 스크립트 기능을 포함 할 필요가 없다고 생각한다. – user1869816

+0

예! 당신 말이 맞아요! 다시 확인하겠습니다. –