बूटस्ट्रैप Togglable टैब रेल

Question

मैं एक रेल ऐप पर ट्विटर के बूटस्ट्रैप से Togglable Tabs का उपयोग करना चाहता हूं, लेकिन मैं इसे काम नहीं कर सकता। यहाँ

<ul class="nav nav-tabs" id="dashboard_products"> 
    <li class="active"><a href="#owned_products"> 1 </a></li> 
    <li><a href="#borrowed_products"> 2 </a></li> 
    <li><a href="#given_products" > 3 </a></li> 
    <li><a href="#requested_products"> 4 </a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="owned_products"> 1 </div> 
    <div class="tab-pane" id="borrowed_products" > 2 </div> 
    <div class="tab-pane" id="given_products" > 3 </div> 
    <div class="tab-pane" id="requested_products" > 4 </div> 
</div> 

और मेरे एप्लिकेशन/आस्तियों/javascripts/pages.js.coffee है:

यहाँ मेरी एप्लिकेशन/विचारों/पृष्ठों/home.html.erb है

$ -> 
    $('#dashboard_products a').click = (e) -> 
    e.preventDefault() 
    $(this).tab('show') 

और यहाँ मेरी एप्लिकेशन/आस्तियों/javascripts/application.js

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require turbolinks 
//= require_tree . 

मैं कहां असफल रहा?

Answer 1

आप data-toggle टैग खो रहे हैं।

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span8 well"> 
      <ul class="nav nav-tabs"> 
       <li class="active"> <a href="#home" data-target="#home" data-toggle="tab">Home</a> 

       </li> 
       <li><a href="#profile" data-target="#profile" data-toggle="tab">Profile</a> 

       </li> 
      </ul> 
      <div class="tab-content"> 
       <div class="tab-pane active fade in" id="home">home tab content</div> 
       <div class="tab-pane" id="profile">profile tab content</div> 
      </div> 
     </div> 
    </div> 
</div> 

DEMO

Answer 2

जांचें कि क्या आपने बूटस्ट्रैप जेएस शामिल किया है ... और बूटस्ट्रैप जेएस को शामिल करने के बाद भी आपको कॉफी स्क्रिप्ट फ़ाइल शामिल करने की जांच करें। और कॉफी स्क्रिप्ट भी आपके एचटीएमएल के बाद होना चाहिए। क्योंकि डोम को इनिट टैब से पहले तत्व बनाना होगा ..

Answer 3

उदाहरण यहाँ

http://getbootstrap.com/javascript/#tabs

एक डेटा-लक्ष्य विशेषता नहीं है:

यहाँ एक उदाहरण है।

<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab" data-target="home">Home</a></li> 

लेकिन जब मैं जोड़ने यह

<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 

यह सब काम किया।