jQuery

2014-06-21 8 views
7

ile etkin Bootstrap 3 sekmesini değiştirme jQuery'yi kullanarak programatik olarak değişen sekmeler deniyordum. @MasterAM here tarafından verilen çözümü uygulamaya çalıştım. jQueryjQuery

<div id="click-me-div">Click Me</div> 

<ul class="nav nav-tabs"> 
    <li class="active"><a href="#fruits" data-toggle="tab">I like Fruits</a></li> 
    <li><a href="#veggies" data-toggle="tab">I like Veggies Too</a></li> 
    <li><a href="#samosas" data-toggle="tab">But Samosa's Rock</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="fruits">Apple, Kiwi, Watermellon</div> 
    <div class="tab-pane" id="veggies">Kale, Spinach, Pepper</div> 
    <div class="tab-pane" id="samosas">Awesome, Spine Tingling, Explosive</div> 
</div> 

Ve burada: Ancak, Chrome konsol hatası İşte Uncaught TypeError: undefined is not a function

gösterir benim HTML

$(document).ready(function() { 
    $("#click-me-div").click(function() { 
     alert('yes, the click actually happened'); 
     ('.nav-tabs a[href="#samosas"]').tab('show'); 
    }); 
}); 

istenen sonucu, ben tıklarsanız "Click Me, o ", etkin sekme" samosas "sekmesine geçmelidir.

Neyi yanlış yapıyorum?

cevap

20

Sen sekmenin onclick() fonksiyonu ve yol id adını kullanabilirsiniz bu kodu

deneyin jQuery işlevini

$(document).ready(function() { 
    $("#click-me-div").click(function() { 
     alert('yes, the click actually happened'); 
     $('.nav-tabs a[href="#samosas"]').tab('show'); 
    }); 
}); 

Fiddle

+0

doh! Teşekkür ederim :) –

+0

Teşekkürler Motti! Bu basit ve harika .. – Gurusinghe

1

bıraktı.

<a onclick='ActivTab("Security")' class="nav-link" data-toggle="tab" href="#Security" aria-controls="profile" role="tab" id='Security'>Security</a> 


    <script> 
     $(document).ready(function(){ 
      ActivTab('Security'); 
     }); 
     function ActivTab(id){ 
//   $('.nav-tabs a[href="#' + id + '"]').tab('show'); 
      $('.nav-tabs a[href="#' + id + '"]').trigger('click'); 
     }; 
    </script> 
+0

Merhaba Ayman, SO'ya hoş geldiniz! Snippet'inizin ne yaptığını ve neden yaptığınızı yaptığınızı açıklamak iyi bir fikir olabilir, böylece yeni gelenler bunu daha kolay anlayacaktır. –

+0

İlk olarak tavsiyeniz için teşekkür ederiz. –