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

Program / 글쓴이

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