Programing

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

lottogame 2020. 10. 7. 07:10
반응형

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

다음 코드에서 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>

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

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

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

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

여기에 코드가 있습니다

<!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>

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

  1. class="nav nav-tabs"와 data-tabs="tabs"의ul
  2. data-toggle="tab"와 href="#orange"의a
  3. class="tab-content"의 div내용의
  4. 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>

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

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

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

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

당신은 놓치고 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>

앵커 태그에 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 '>에 다음을 추가했습니다.

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

<!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 스크립트를로드하는 것을 잊지 마십시오.

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

사실, 그것을하는 또 다른 쉬운 방법이 있습니다. 그것은 나를 위해 작동하지만 여러분들에게는 확실하지 않습니다. 여기서 중요한 것은 각 탭 창에 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>

This solved it when none of the other examples did:

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

i had the same problem until i downloaded bootstrap-tab.js and included it in my script, download from here https://code.google.com/p/fusionleaf/source/browse/webroot/fusionleaf/com/www/inc/bootstrap/js/bootstrap-tab.js?r=82aacd63ee1f7f9a15ead3574fe2c3f45b5c1027

include the bootsrap-tab.js in the just below the jquery

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

Final Code Looked like this:

 <!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>

Since i'm working with Bootstrap Javascript Modules instead of loading the entire Bootstrap Javascript, my tabs were not working because i forgot to load load/include/ the node_modules/bootstrap/js/tab.js file.

enter image description here

After including it, it worked...

Good Luck

Just copy the script tag for adding the bootstrap.js from the head section to the end of the body. Then everything should work fine even without the scripts to activate the tabs.

참고URL : https://stackoverflow.com/questions/9630595/twitter-bootstrap-tabs-not-working-when-i-click-on-them-nothing-happens

반응형

'Programing' 카테고리의 다른 글

Linq에서 SQL로-상위 n 개 행 반환  (0) 2020.10.07
HTML 양식이 편집되었는지 감지하는 일반적인 방법  (0) 2020.10.07
일관성없는 접근성 : 속성 유형에 대한 접근성이 떨어짐  (0) 2020.10.07
Nginx를 업스트림 프록시로 사용하도록 Docker 포트 매핑을 구성하는 방법은 무엇입니까?  (0) 2020.10.06
내 수업에 스왑 기능을 제공하는 방법은 무엇입니까?  (0) 2020.10.06

'Programing'의 다른글

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

관련글

댓글

티스토리툴바