Zakładki Twitter Bootstrap nie działają: kiedy na nie klikam, nic się nie dzieje

Question 1

Próbuję zaimplementować zakładki Twitter Bootstrap w poniższym kodzie, ale wygląda na to, że nie działa. Zakładki są wyświetlane, ale kiedy je klikam, nic się nie dzieje. Poniżej znajduje się jedyny kod, którego używam. Wszystkie inne skrypty CSS / JS są kopiowane z frameworka 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

Musisz dodać wtyczkę tabs do swojego kodu

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

Cóż, to nie zadziałało. Zrobiłem kilka testów i zaczęło działać, gdy:

przeniesiony (zaktualizowany do wersji 1.7) skrypt jQuery do <head>sekcji
dodano data-toggle="tab"do linków i identyfikatora <ul>elementu tab
zmieniono $(".tabs").tabs();na$("#tabs").tab();
i kilka innych rzeczy, które nie powinny mieć znaczenia

Oto kod

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

Kluczowe elementy to:

class="nav nav-tabs"i data-tabs="tabs"odul
data-toggle="tab"oraz href="#orange"za
class="tab-content"z divtreści
class="tab-pane"i iddiv z pozycji

Pełny kod jest jak poniżej:

<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

Wystąpił problem z zakładkami Bootstrap, które ostatnio stosowały się do ich wytycznych online , ale obecnie występuje błąd w ich przykładzie znaczników data-tabs="tabs„brakuje <ul>elementu. Bez tego użycie data-togglew linkach nie działa.

Question 5

Mam ten sam problem, ale powyżej niektóre odpowiedzi mogą być dla mnie trudne.

Znalazłem inną odpowiedź może rozwiązać twoje pytanie Twitter Bootstrap Js (karty, wyskakujące okienka, lista rozwijana) nie działa w Drupalu

miejsce jquery.jswcześniejbootstrap.tab.js

Question 6

Brakuje data-toggle="tab"tagu danych w adresach URL menu, więc skrypty nie mogą określić, gdzie znajdują się przełączniki kart:

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

Właśnie rozwiązałem ten problem, dodając element data-toggle = "tab" w tagu kotwicy

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

i dodał następujący tekst w sekcji nagłówka http://code.jquery.com/jquery-1.7.1.js '>

Question 8

Wypróbowałem kody z dokumentu bootstrapa w następujący sposób:

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

i to działa. Ale kiedy <script src...>zmieniam pozycję tych dwóch , to nie działa. Więc pamiętaj, aby załadować skrypt jquery przed bootstrap.js.

Question 9

Dla mnie problem polegał na tym, że nie włączyłem bootstrap.min.css (włączyłem tylko bootstrap-responsive.min.css).

Question 10

Właściwie jest na to inny łatwy sposób. U mnie to działa, ale nie jestem pewien dla was. Kluczową rzeczą jest po prostu dodanie FADE w każdym (panelu z zakładkami) i będzie działać. Poza tym nie potrzebujesz nawet funkcji skryptu ani żadnej wersji jQuery. Oto mój kod ... mam nadzieję, że zadziała dla wszystkich.

<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

To rozwiązało problem, gdy żaden z innych przykładów nie:

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

Question 12

miałem ten sam problem, dopóki nie pobrałem bootstrap-tab.js i nie umieściłem go w swoim skrypcie, pobierz stąd https://code.google.com/p/fusionleaf/source/browse/webroot/fusionleaf/com/www/inc /bootstrap/js/bootstrap-tab.js?r=82aacd63ee1f7f9a15ead3574fe2c3f45b5c1027

dołącz plik bootsrap-tab.js tuż pod jquery

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

Ostateczny kod wyglądał tak:

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

Ponieważ pracuję z Bootstrap Javascript Moduleszamiast załadowanie całego Bootstrap Javascriptmoje zakładki nie działa, bo zapomniał załadować load/include/ten node_modules/bootstrap/js/tab.jsplik.

Po włączeniu zadziałało ...

Powodzenia

Question 14

Po prostu skopiuj tag script, aby dodać bootstrap.jsod sekcji head do końca ciała. Wtedy wszystko powinno działać dobrze, nawet bez skryptów do aktywacji zakładek.

Answer 1

Próbuję zaimplementować zakładki Twitter Bootstrap w poniższym kodzie, ale wygląda na to, że nie działa. Zakładki są wyświetlane, ale kiedy je klikam, nic się nie dzieje. Poniżej znajduje się jedyny kod, którego używam. Wszystkie inne skrypty CSS / JS są kopiowane z frameworka 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>

Answer 2

3

Dodawanie też data-togglezadziałało; dotyczy to również Bootstrap 3. Oto bootply z działającym przykładem: bootply.com/74927

ericsoco

Answer 3

Musisz dodać wtyczkę tabs do swojego kodu

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

Cóż, to nie zadziałało. Zrobiłem kilka testów i zaczęło działać, gdy:

przeniesiony (zaktualizowany do wersji 1.7) skrypt jQuery do <head>sekcji
dodano data-toggle="tab"do linków i identyfikatora <ul>elementu tab
zmieniono $(".tabs").tabs();na$("#tabs").tab();
i kilka innych rzeczy, które nie powinny mieć znaczenia

Oto kod

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

Answer 4

12

Dzięki Bartek; myślę jednak, że skrypt bootstrap.js zawiera również bootstrap-tab.js. Proszę, popraw mnie jeśli się mylę. W każdym razie dodałem bootstrap-tab.js i nadal nie działa.

DEREK N

Answer 5

Masz rację, ale zależy to również od niestandardowej kompilacji bootstrapa :) ... usunięto pozostałą część komentarza; nie zauważyłem, że

aliasujesz

Answer 6

Próbowałem tego również; nie działa. Czy powyższy kod HTML działa dla Ciebie?

DEREK N

Answer 7

4

Dzięki Barek, zadziałało! Aktualizacja jQuery do wersji 1.7 i przełączanie danych rozwiązały problem. Nie potrzebujesz nawet tagu script.

DEREK N

Answer 8

Dzięki temu naprawdę pomogło - nie musiałem przenosić skryptu jquery Po prostu wykonałem pozostałe 3 kroki

Rob

Answer 9

Kluczowe elementy to:

class="nav nav-tabs"i data-tabs="tabs"odul
data-toggle="tab"oraz href="#orange"za
class="tab-content"z divtreści
class="tab-pane"i iddiv z pozycji

Pełny kod jest jak poniżej:

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

Answer 10

co jeśli chcę wywołać funkcję, gdy karta stanie się aktywna, aby załadować zawartość karty?

sureshvv

Answer 11

Świetnie, ta rada mi pomogła. Dziękuję Ci!

NPC

Answer 12

Jeśli używasz tego z AngularJS, podaj ul an id = "myTabs", a następnie dodaj: $ ('# myTabs a'). Click (function (e) {e.preventDefault (); $ (this) .tab ( 'pokazać'); });

Robbie Smith

Answer 13

W tej odpowiedzi podoba mi się fakt, że do zainicjowania karty nie jest potrzebny skrypt javascript. To mi pomogło. Dzięki

Sincere

Answer 14

Wystąpił problem z zakładkami Bootstrap, które ostatnio stosowały się do ich wytycznych online , ale obecnie występuje błąd w ich przykładzie znaczników data-tabs="tabs„brakuje <ul>elementu. Bez tego użycie data-togglew linkach nie działa.

Answer 15

Mam ten sam problem, ale powyżej niektóre odpowiedzi mogą być dla mnie trudne.

Znalazłem inną odpowiedź może rozwiązać twoje pytanie Twitter Bootstrap Js (karty, wyskakujące okienka, lista rozwijana) nie działa w Drupalu

miejsce jquery.jswcześniejbootstrap.tab.js

Answer 16

Brakuje data-toggle="tab"tagu danych w adresach URL menu, więc skrypty nie mogą określić, gdzie znajdują się przełączniki kart:

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>

Answer 17

Właśnie rozwiązałem ten problem, dodając element data-toggle = "tab" w tagu kotwicy

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

i dodał następujący tekst w sekcji nagłówka http://code.jquery.com/jquery-1.7.1.js '>

Answer 18

Wypróbowałem kody z dokumentu bootstrapa w następujący sposób:

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

i to działa. Ale kiedy <script src...>zmieniam pozycję tych dwóch , to nie działa. Więc pamiętaj, aby załadować skrypt jquery przed bootstrap.js.

Answer 19

0

Dla mnie problem polegał na tym, że nie włączyłem bootstrap.min.css (włączyłem tylko bootstrap-responsive.min.css).

Jon Onstott
źródło

Answer 20

Właściwie jest na to inny łatwy sposób. U mnie to działa, ale nie jestem pewien dla was. Kluczową rzeczą jest po prostu dodanie FADE w każdym (panelu z zakładkami) i będzie działać. Poza tym nie potrzebujesz nawet funkcji skryptu ani żadnej wersji jQuery. Oto mój kod ... mam nadzieję, że zadziała dla wszystkich.

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

Answer 21

Dodałem już tę fadeklasę, ale zakładki działały tylko w Google Chrome z asnc bootstrap.min.js-file. Po dodaniu data-toggle="tab"zakładki działały również na Mozilla Firefox i MS Edge.

Grischa

Answer 22

0

To rozwiązało problem, gdy żaden z innych przykładów nie:

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

Brock Hensley
źródło

Answer 23

miałem ten sam problem, dopóki nie pobrałem bootstrap-tab.js i nie umieściłem go w swoim skrypcie, pobierz stąd https://code.google.com/p/fusionleaf/source/browse/webroot/fusionleaf/com/www/inc /bootstrap/js/bootstrap-tab.js?r=82aacd63ee1f7f9a15ead3574fe2c3f45b5c1027

dołącz plik bootsrap-tab.js tuż pod jquery

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

Ostateczny kod wyglądał tak:

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

Answer 24

Dzięki, to jedyna rzecz, która w końcu zadziałała. Pytanie: dlaczego ten plik nie został dołączony do oryginalnego pliku do pobrania bootstrap, jeśli działa tak dobrze? Chcę się tylko upewnić, że mam dostęp do wszystkiego, czego potrzebuję, aby bootstrap działał w przyszłości.

user2223059

Answer 25

Ponieważ pracuję z Bootstrap Javascript Moduleszamiast załadowanie całego Bootstrap Javascriptmoje zakładki nie działa, bo zapomniał załadować load/include/ten node_modules/bootstrap/js/tab.jsplik.

Po włączeniu zadziałało ...

Powodzenia

Answer 26

Po prostu skopiuj tag script, aby dodać bootstrap.jsod sekcji head do końca ciała. Wtedy wszystko powinno działać dobrze, nawet bez skryptów do aktywacji zakładek.

Zakładki Twitter Bootstrap nie działają: kiedy na nie klikam, nic się nie dzieje

Odpowiedzi: