Twitter Bootstrap sekmeleri çalışmıyor: üzerlerine tıkladığımda hiçbir şey olmuyor

81

Aşağıdaki kodda Twitter Önyükleme sekmelerini uygulamaya çalışıyorum ancak çalışmıyor gibi görünüyor. Sekmeler görüntüleniyor, ancak üzerlerine tıkladığımda hiçbir şey olmuyor. Kullandığım tek kod aşağıdadır. Diğer tüm CSS / JS betikleri Twitter Bootstrap çerçevesinden kopyalanır.

<!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>
html  twitter-bootstrap 
— DEREK N
kaynak
3
Ekleme data-togglebenim için de çalıştı; bu Bootstrap 3 için de geçerlidir. İşte çalışan bir örnek içeren bir bootply
— ericsoco

Yanıtlar:

87

Kodunuza sekme eklentisi eklemeniz gerekiyor

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

Peki, işe yaramadı. Bazı testler yaptım ve şu anda çalışmaya başladı:

  1. (1.7'ye güncellendi) jQuery komut dosyası <head>bölüme taşındı
  2. sekme öğesi data-toggle="tab"için bağlantılara ve kimliğe eklendi<ul>
  3. değişti $(".tabs").tabs();etmek$("#tabs").tab();
  4. ve önemli olmaması gereken diğer bazı şeyler

İşte bir 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>
— BartekR
kaynak
12
Teşekkürler Bartek; ancak bootstrap.js betiğinin de bootstrap-tab.js içerdiğini düşünüyorum. Yanlışım varsa lütfen düzelt. Her neyse, bootstrap-tab.js ekledim ve hala çalışmıyor.
— DEREK N
Haklısın, ama aynı zamanda özel önyükleme yapısına da bağlı :) ... yorumun diğer kısmı kaldırıldı; ad alanını takma ad kullandığınızı fark
— etmediniz
Bunu da denedim; çalışmıyor. Yukarıdaki HTML kodu sizin için çalışıyor mu?
— DEREK N
4
Teşekkürler Barek, işe yaradı! JQuery'yi 1.7'ye yükseltmek ve veri geçişi sorunu çözdü. Komut dosyası etiketine bile ihtiyacınız yok.
— DEREK N
Teşekkürler, bu gerçekten yardımcı oldu - jquery betiğini taşımama gerek yoktu Sadece diğer 3 adımı takip ettim
— Rob
66

Anahtar unsurlar şunları içerir:

  1. class="nav nav-tabs"ve data-tabs="tabs"birul
  2. data-toggle="tab"ve href="#orange"bira
  3. class="tab-content"ait diviçeriğin
  4. class="tab-pane"ve idöğelerin div

Kodun tamamı aşağıdaki gibidir:

<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>
— Jacky
kaynak
sekmenin içeriğini yüklemek için bir sekme etkin olduğunda bir işlevi çağırmak istersem ne olur?
— sureshvv
Harika, bu tavsiye bana yardımcı oldu. Teşekkür ederim!
— NPC
Bunu AngularJS ile kullanıyorsanız, ul bir id = "myTabs" verin ve ardından şunu ekleyin: $ ('# myTabs a'). Tıklayın (function (e) {e.preventDefault (); $ (this) .tab ( 'göstermek'); });
— Robbie Smith
Bu cevapta bir sekmeyi başlatmak için javascript gerekmemesi hoşuma gitti. Bu bana yardımcı oldu. Teşekkürler
— Samimi
20

Kısa süre önce çevrimiçi yönergelerini izleyen Bootstrap sekmeleriyle ilgili bir sorun yaşadım , ancak şu anda işaretleme örneğinde bir hata var data-tabs="tabs" <ul>öğesinde eksik . data-toggleBağlantılarda kullanılmadan çalışmıyor.

— IdaS
kaynak
16

data-toggle="tab"Menü URL'lerinizde veri etiketi eksik olduğundan, komut dosyalarınız sekme anahtarlarınızın nerede olduğunu söyleyemez:

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>
— Andres Ilich
kaynak
4

Bağlantı etiketine data-toggle = "tab" öğesi ekleyerek bu sorunu çözdüm

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

ve http://code.jquery.com/jquery-1.7.1.js '> baş bölümüne aşağıdakileri ekledi

— kullanıcı1203530
kaynak
1

Bootstrap'in belgesindeki kodları şu şekilde denedim:

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

ve çalışıyor. Ama bu ikisinin <script src...>konumunu değiştirdiğimde işe yaramıyor. Bu nedenle, lütfen jquery komut dosyanızı bootstrap.js'den önce yüklemeyi unutmayın.

— kullanıcı2595775
kaynak
0

Benim için sorun, bootstrap.min.css'yi dahil etmememdi (sadece bootstrap-responsive.min.css'yi dahil ediyordum).

— Jon Onstott
kaynak
0

Aslında, bunu yapmanın başka bir kolay yolu var. Benim için işe yarıyor ama sizden emin değilim. Buradaki en önemli şey, her birine (sekme bölmesi) FADE'i eklemektir ve işe yarayacaktır. Ayrıca, komut dosyası işlevine veya jQuery'nin herhangi bir sürümüne bile ihtiyacınız yok. İşte benim kodum ... umarım hepiniz için çalışır.

<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>
— Joe Geek
kaynak
fadeSınıfı zaten dahil etmiştim , ancak sekmeler yalnızca Google Chrome'da asnc bootstrap.min.js-file ile çalışıyordu. Ekledikten sonra data-toggle="tab"sekmeler Mozilla Firefox ve MS Edge'de de çalıştı.
— Grischa
0

Bu, diğer örneklerin hiçbiri çözmediğinde sorunu çözdü:

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});
— Brock Hensley
kaynak
0

bootstrap-tab.js dosyasını indirip komut dosyama dahil edene kadar aynı sorunu yaşadım, buradan https://code.google.com/p/fusionleaf/source/browse/webroot/fusionleaf/com/www/inc /bootstrap/js/bootstrap-tab.js?r=82aacd63ee1f7f9a15ead3574fe2c3f45b5c1027

bootsrap-tab.js'yi jquery'nin hemen altına ekleyin

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

Nihai Kod Şuna benziyordu:

 <!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>
Teşekkürler, sonunda benim için işe yarayan tek şey bu. Soru: Bu dosya bu kadar iyi çalışıyorsa neden orijinal önyükleme indirmesine dahil edilmedi? Sadece gelecekte çalışması için önyükleme için ihtiyacım olan her şeye erişimim olduğundan emin olmak istiyorum.
— user2223059
0

İ ile çalışıyorum beri Bootstrap Javascript Modulesyerine bütününü yükleme Bootstrap Javascripti yüklemek için unuttuğu için, benim sekmeler çalışmıyordu dosyayı.load/include/node_modules/bootstrap/js/tab.js

görüntü açıklamasını buraya girin

Ekledikten sonra işe yaradı ...

İyi şanslar

— Aakash
kaynak
-8

bootstrap.jsBaş bölümünden gövdenin sonuna eklemek için komut dosyası etiketini kopyalamanız yeterlidir. O zaman sekmeleri etkinleştirmek için komut dosyaları olmadan bile her şey yolunda gitmelidir.

— Mohamed Haseel
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.