Twitter Bootstrap 탭이 작동하지 않음 : 클릭해도 아무 일도 일어나지 않습니다.

Question 1

다음 코드에서 Twitter Bootstrap 탭을 구현하려고하는데 작동하지 않는 것 같습니다. 탭이 표시되지만 클릭해도 아무 일도 일어나지 않습니다. 아래는 내가 사용하는 유일한 코드입니다. 다른 모든 CSS / JS 스크립트는 Twitter Bootstrap 프레임 워크에서 복사됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="assets/twitterbootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/twitterbootstrap/css/bootstrap-responsive.css" rel="stylesheet">

</head>

<body data-spy="scroll" data-target=".subnav" data-offset="50">

<div class="container">

<!-------->
<div id="content">
    <ul class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red">Red</a></li>
        <li><a href="#orange">Orange</a></li>
        <li><a href="#yellow">Yellow</a></li>
        <li><a href="#green">Green</a></li>
        <li><a href="#blue">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $(".tabs").tabs();
    });
</script>    
</div> <!-- container -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap.js"></script>
</body>
</html>

Question 2

코드에 탭 플러그인을 추가해야합니다.

<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>

음, 작동하지 않았습니다. 몇 가지 테스트를했고 다음과 같은 경우 작동하기 시작했습니다.

jQuery 스크립트를 <head>섹션 으로 이동 (1.7로 업데이트)
탭 요소의 data-toggle="tab"링크 및 ID에 추가됨<ul>
변경 $(".tabs").tabs();에$("#tabs").tab();
그리고 중요하지 않은 다른 것들

여기에 코드가 있습니다

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
        <li><a href="#green" data-toggle="tab">Green</a></li>
        <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>


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


<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>

</body>
</html>

Question 3

핵심 요소는 다음과 같습니다.

class="nav nav-tabs"와 data-tabs="tabs"의ul
data-toggle="tab"와 href="#orange"의a
class="tab-content"의 div내용의
class="tab-pane"및 id항목의 DIV의

전체 코드는 다음과 같습니다.

<ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li>
    <li><a data-toggle="tab" href="#orange">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li>
    <li><a data-toggle="tab" href="#green">Green</a></li>
    <li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="red">
        <h1>Red</h1>
        <p>red red red red red red</p>
    </div>
    <div class="tab-pane" id="orange">
        <h1>Orange</h1>
        <p>orange orange orange orange orange</p>
    </div>
    <div class="tab-pane" id="yellow">
        <h1>Yellow</h1>
        <p>yellow yellow yellow yellow yellow</p>
    </div>
    <div class="tab-pane" id="green">
        <h1>Green</h1>
        <p>green green green green green</p>
    </div>
    <div class="tab-pane" id="blue">
        <h1>Blue</h1>
        <p>blue blue blue blue blue</p>
    </div>
</div>

Question 4

최근 온라인 가이드 라인을 따르는 부트 스트랩 탭에 문제가 있었지만 현재 마크 업 예제에 오류가 있습니다. data-tabs="tabs"is missing on <ul>element. it using data-toggleon links does not work.

Question 5

나는 같은 문제가 있지만 위의 일부 답변은 나에게 까다로울 수 있습니다.

다른 답변이 귀하의 질문을 해결할 수 있음을 발견했습니다 .Drupal에서 작동하지 않는 Twitter Bootstrap Js (탭, 팝업, 드롭 다운)

jquery.js전에 배치bootstrap.tab.js

Question 6

당신은 놓치고 data-toggle="tab"당신의 탭 스위치가 어디에 스크립트가 말할 수 있도록 메뉴 URL에 대한 데이터 태그 :

HTML

<ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li>
    <li><a data-toggle="tab" href="#orange">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li>
    <li><a data-toggle="tab" href="#green">Green</a></li>
    <li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>

Question 7

앵커 태그에 data-toggle = "tab" 요소를 추가하여이 문제를 해결했습니다.

<div class="container">

<!-------->
  <div id="content">

   <ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#red">Red</a></li>
<li><a data-toggle="tab"  href="#orange">Orange</a></li>
<li><a data-toggle="tab" href="#yellow">Yellow</a></li>
<li><a data-toggle="tab" href="#green">Green</a></li>
<li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="red">
    <h1>Red</h1>
    <p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
    <h1>Orange</h1>
    <p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
    <h1>Yellow</h1>
    <p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
    <h1>Green</h1>
    <p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
    <h1>Blue</h1>
    <p>blue blue blue blue blue</p>

헤드 섹션 http://code.jquery.com/jquery-1.7.1.js '>에 다음을 추가했습니다.

Question 8

다음과 같이 부트 스트랩 문서의 코드를 시도했습니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>tab demo</title>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="span9">
    <div class="tabbable"> <!-- Only required for left/right tabs -->
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <p>I'm in Section 1.</p>
        </div>
        <div class="tab-pane" id="tab2">
          <p>Howdy, I'm in Section 2.</p>
        </div>
      </div>
    </div>
</div> 
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
</body>
</html>

그리고 그것은 작동합니다. 하지만이 두 <script src...>위치를 바꾸면 작동하지 않습니다. 따라서 bootstrap.js 전에 jquery 스크립트를로드하는 것을 잊지 마십시오.

Question 9

나에게 문제는 내가 bootstrap.min.css를 포함하지 않았다는 것입니다 (나는 bootstrap-responsive.min.css 만 포함했습니다).

Question 10

사실, 그것을 할 수있는 또 다른 쉬운 방법이 있습니다. 그것은 나를 위해 작동하지만 너희들에게는 확실하지 않습니다. 여기서 핵심은 각 (탭 창)에 FADE를 추가하는 것뿐입니다. 게다가, 스크립트 함수 나 어떤 버전의 jQuery도 필요하지 않습니다. 여기에 내 코드가 있습니다 ... 모두에게 효과가 있기를 바랍니다.

<div class="tab-pane fade" id="Customer">
    <table class="table table-hover table-bordered">
        <tr>
            <th width="40%">Contact Person</th>
            <td><?php echo $event['Event']['e_contact_person']; ?></td>
        </tr>
    </table>
</div>
<div class="tab-pane fade" id="Delivery">
    <table class="table table-hover table-bordered">
        <tr>
            <th width="40%">Time Arrive Warehouse Start</th>
            <td><?php echo $event['Event']['e_time_arrive_WH_start']; ?></td>
        </tr>
    </table>
</div>

Question 11

이것은 다른 예제가 없었을 때 해결되었습니다.

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

Question 12

bootstrap-tab.js를 다운로드하고 스크립트에 포함 할 때까지 동일한 문제가 발생했습니다. https://code.google.com/p/fusionleaf/source/browse/webroot/fusionleaf/com/www/inc /bootstrap/js/bootstrap-tab.js?r=82aacd63ee1f7f9a15ead3574fe2c3f45b5c1027

jquery 바로 아래에 bootsrap-tab.js를 포함하십시오.

<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>

최종 코드는 다음과 같습니다.

 <!DOCTYPE html>
<html lang="en">
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="libraries/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>
</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
        <li><a href="#green" data-toggle="tab">Green</a></li>
        <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>


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


<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

</body>
</html>

Question 13

Bootstrap Javascript Modules전체를로드하는 대신 함께 작업하기 때문에Bootstrap Javascript 전로드 잊었 때문에, 내 탭이 작동되지 않은 파일을.load/include/node_modules/bootstrap/js/tab.js

그것을 포함시킨 후 작동했습니다 ...

행운을 빕니다

Question 14

bootstrap.jshead 섹션에서 본문 끝에 추가하기위한 script 태그를 복사하기 만하면 됩니다. 그러면 탭을 활성화하는 스크립트가 없어도 모든 것이 잘 작동합니다.