Twitter Bootstrap 탭이 작동하지 않습니다.

내 탭이 평이하지 않습니다. 탭 영역의 다른 영역에서 활성 클래스를 이동하면 페이지가로드 될 때 활성 클래스가 표시되지만 탭을 클릭해도 아무 것도 나타나지 않습니다. 덜 효과적이기 때문에 내 자바 스크립트가 실행 중이므로 문제가 무엇인지 알 수 없습니다. 값 tab, 예컨대 :Twitter Bootstrap 탭이 작동하지 않습니다.

<li><a data-toggle="tab" href="#home">Service 1</a></li>

는 또한 this example 참조와 data-toggle 속성 (탭 있어야하는) 모든 a -tags에

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <title>Your Income Expert</title> 
    <link rel="stylesheet/less" type="text/css" href="less/style.less"> 
    <script src="js/less.js" type="text/javascript"></script> 
    <script src="js/bootstrap-tab.js" type="text/javascript"></script> 
</head> 

<body> 
    <div class="container"> 
     <div class="row"> 
     <div class="span3"> 
      <div class="well sidebar-nav"> 
      <ul class="nav nav-list"> 
       <li><h2>Your Logo Here</h2></li> 
       <li class="nav-header">Main</li> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Company</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Books</a></li> 
       <li><a href="#">Contact</a></li> 
       <li class="nav-header">Keep In Touch</li> 
       <li><a href="#">Facebook</a></li> 
       <li><a href="#">Twitter</a></li> 
       <li><a href="#">LinkedIn</a></li> 
       <li><a href="#">Blog</a></li> 
      </ul> 
      </div><!--/.well --> 
     </div><!--/span--> 
     <div class="span9"> 
      <div class="well"> 
       <div id="motivator"> 
        <img src="broker.png" alt="" /> 
       </div> 

       <h2 id="motivator-subtext">Main Heading</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu pretium dolor. Ut a vulputate turpis. Donec dignissim mollis scelerisque. Maecenas pharetra, massa a varius mollis, magna odio suscipit sapien, et posuere tellus tellus non arcu.</p> 
       <p>Fusce a tincidunt purus. Pellentesque augue leo, varius pellentesque tempus sit amet, posuere at tortor. Aenean congue nibh sit amet quam tristique.</p> 

       <h3>Heading</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet neque sit amet libero pulvinar vitae consequat ante adipiscing. Nam vehicula arcu in diam vehicula pretium.</p> 

       <ul class="nav nav-tabs"> 
        <li><a href="#home">Service 1</a></li> 
        <li><a href="#profile">Service 2</a></li> 
        <li><a href="#messages">Service 3</a></li> 
        <li><a href="#settings">Service 4</a></li> 
       </ul> 

       <div class="tab-content"> 
        <div class="tab-pane active" id="home"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet neque sit amet libero pulvinar vitae consequat ante adipiscing. Nam vehicula arcu in diam vehicula pretium. Nulla volutpat tellus ut tellus consectetur blandit egestas est ullamcorper. Morbi adipiscing suscipit quam eget eleifend. Nam est turpis, blandit sed vehicula ut, aliquet quis turpis. Nulla et ligula in.</p> 
        </div> 
        <div class="tab-pane" id="profile"> 
        <p>Testing the profile tab.</p> 
        </div> 
        <div class="tab-pane" id="messages"> 
        <p>Testing the messages tab</p> 
        </div> 
        <div class="tab-pane" id="settings"> 
        <p>Testing the settings tab.</p> 
        </div> 
       </div> 
       <script> 
        $(function() { 
        $('.tabs a:first').tab('show') 
        }) 
       </script> 

       <h3>Heading</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu pretium dolor. Ut a vulputate turpis. Donec dignissim mollis scelerisque. Maecenas pharetra, massa a varius mollis, magna odio suscipit sapien, et posuere tellus tellus non arcu.</p> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

출처

2012-03-07 Alex Flood

추가; 세 번째 탭은 active 클래스를 li으로 설정하여 선택합니다.

P.S .: 자바 스크립트 ($(function() { $('.tabs a:first').tab('show') }))가 필요하지 않습니다.

처럼 === 명령에 예를 들어 링크의 업데이트 ===

문서 head가 보일 것입니다 :

<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>Your Income Expert</title> 
    <link type="text/css" rel="stylesheet/less" href="less/style.less"> 
    <link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> 
    <script type="text/javascript" src="js/less.js"></script> 
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> 
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script> 
</head>

출처

2012-03-07 08:29:45 scessor

제 마지막에 뭔가 이상한 것이 틀림 없습니다. 완전히 새로운 프로젝트를 설정하고 링크에서 예제를 시도했지만 아무 것도 효과가 없었습니다. –

나는 신선한 프로젝트를 시작했고 여전히 효과가 없습니다. Unscaught TypeError : 정의되지 않은 'fn'속성을 읽을 수 없습니다. –

jQuery가 누락되었습니다.''문서의 'head'에 있습니다. – scessor

-2

이 당신의 머리 태그에 파일을 JS 추가하십시오

// http://code.jquery.com/jquery-1.7.1.js '>

이제 확인하십시오. 문제가 해결되었습니다.

출처

2013-08-01 06:16:51

Twitter Bootstrap 탭이 작동하지 않습니다.

답변

관련 문제