रेल 3.2.3 + ट्विटर बूटस्ट्रैप + एनवी-टैब: एक विशिष्ट टैब कैसे दिखाएं?

Question

रेल और बूटस्ट्रैप के संबंध में एक और नौसिखिया प्रश्न।

मैं कुछ इस तरह उपयोग कर रहा हूँ:

<div class="tabbable tabs-left"> 
<ul class="nav nav-tabs"> 
    <li class="active"><a href="#tab1" data-toggle="tab">About us</a></li> 
      <li><a href="#tab9" data-toggle="tab">Address</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="tab1"> 
     <%= render 'about_us' %> 
    </div> 
    <div class="tab-pane" id="tab9"> 
     <%= render 'address' %> 
    </div> 
</div> 

मेरे समस्या यह है कि मैं 'पता' है जो एक रूप भी शामिल है प्रस्तुत करना है। इस फॉर्म को सबमिट करके मैं एक अलग नियंत्रक में समाप्त होता हूं। इस नियंत्रक के साथ एक नया पता सहेजने के बाद मैं इस पृष्ठ पर रीडायरेक्ट करना चाहता हूं और पता टैब दिखा सकता हूं।

मैंने रीडायरेक्ट कमांड का प्रयास किया था: redirect_to salon_path (@ salon.id.to_s + "# tab9") यह परिणाम url .../सैलून/1% 23tab9 को कॉल करने में परिणाम देता है। मुझे लगता है कि मुझे इसकी ज़रूरत है .../सैलून/1 # टैब 9।

लेकिन शायद आपके पास एक विशिष्ट टैब चुनने का बेहतर समाधान हो रहा है।

का उपयोग करना:

gem 'rails', '3.2.3' 
gem 'bootstrap-sass', '2.0.3'. 

Answer 1

मैं इसे बाहर अपने आप को समझ सकता है, इस पोस्ट यहाँ मुझे सही रास्ते पर लाया: How to get Twitter-Bootstrap navigation to show active link?

<div class="tabbable tabs-left"> 
<ul class="nav nav-tabs"> 
    <li class="<%= 'active' if params[:tab] == 'tab1' %>"><a href="#tab1" data-toggle="tab">About us</a></li> 
    <li class="<%= 'active' if params[:tab] == 'tab9' %>"> <a href="#tab9" data-toggle="tab">Address</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="<%= if (params[:tab] == 'tab1' || !params[:tab])then 'tab-pane active' else 'tab-pane' end%>" id="tab1"> 
     <%= render 'about_us' %> 
    </div> 
    <div class="<%= if params[:tab] == 'tab9' then 'tab-pane active' else 'tab-pane' end%>" id="tab9"> 
     <%= render 'address' %> 
    </div> 
</div> 

और मेरे उदाहरण में मैं इसे की तरह फोन यह:

redirect_to salon_path(@salon.id, tab:"tab9") 

Answer 2

भविष्य के संदर्भ के लिए और इसी तरह के मुद्दों वाले उपयोगकर्ताओं के लिए, मैं मार्कस की प्रतिक्रिया में एक और सुविधा जोड़ूंगा। समाधान स्वयं ही सही है और एक आकर्षण की तरह काम करता है लेकिन यदि कोई टैब पैरामीटर पारित नहीं होता है तो क्या होता है? फिर बूटस्ट्रैप कोई टैब सामग्री नहीं दिखाता है और केवल टैब दिखाए जाते हैं। मेरे लिए, यह बदसूरत और गैर-व्यावसायिक दिखता है। मेरे मामले में, मैंने इसे ठीक करने के लिए निम्न jQuery जोड़ा।

$(document).ready(function() { 

//The following set of code checks to see if any tab is already active (this occurs if a parameter to tab would be passed) 
//If no tab is active, make the first tab and tab-pane active 
var elementAlreadyActive = false; 
$('.nav-tabs li').each(function(index, li) { 
    var element = $(li); 
    if (element.attr("class") == "active"){ 
      elementAlreadyActive = true; 
    } 

}); 
if (!elementAlreadyActive){ 
    $('.nav-tabs li:first').addClass('active'); 
    $('.tab-content div:first').addClass('active'); 
} }); 

पैरामीटर पारित होने पर कुछ भी दिखाने के बजाय, कोड सभी ली तत्वों को जांचता है कि कोई भी पहले से सक्रिय है या नहीं। यदि उनमें से कोई भी नहीं है, तो यह पहला टैब और टैब-फलक सक्रिय बनाता है।

हालांकि पहले टैब को सक्रिय करने के लिए सभी के लिए उपयोगी नहीं हो सकता है, यदि कोई पैरामीटर पारित नहीं किया गया है तो ऊपर दिए गए कोड को एक विशिष्ट टैब सक्रिय करने के लिए आसानी से संशोधित किया जा सकता है।

Answer 3

तुम बस प्रत्येक टैब के लिए प्रत्येक सूची आइटम लंगर के लिए data-toggle="tab" और class="tab-pane" करने के लिए

<div class="tabbable"> 
<ul class="nav nav-tabs" id="proftabs"> 
    <li><a href="#profile_tab" data-toggle="tab" >Profile</a></li> 
    <li><a href="#friends_tab" data-toggle="tab">Friends</a></li> 
    <li><a href="#photos_tab" data-toggle="tab">Photos</a></li> 
    <li><a href="#videos_tab" data-toggle="tab">Videos</a></li> 
    <li><a href="#quotes_tab" data-toggle="tab">Quotes</a></li> 

<div class="tab-content"> 
     <div id="profile_tab" class="tab-pane"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid excepturi id, maxime nesciunt recusandae repellat unde veritatis! Eveniet, fugiat, ipsum. Architecto assumenda, culpa impedit molestias natus porro quisquam repudiandae sunt! 
     </div> 
    <div id="friends_tab" class="tab-pane"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut corporis cupiditate incidunt. Accusantium adipisci architecto dignissimos eligendi est explicabo ipsa molestiae nesciunt optio porro provident, sint soluta, tempore temporibus vitae? 
    </div> 
    <div id="photos_tab" class="tab-pane"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ex harum iste magnam necessitatibus sed sit. A adipisci amet cupiditate delectus dolor itaque numquam officia omnis, provident quod temporibus voluptatibus? 
    </div> 
    <div id="videos_tab" class="tab-pane"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto at autem dolore, dolorum eaque earum eius, id in iste molestias officia, possimus qui quis recusandae repellat reprehenderit suscipit voluptatum! 
    </div> 
    <div id="quotes_tab" class="tab-pane"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consectetur, in necessitatibus qui quidem tenetur unde voluptatum! Aspernatur dolorem earum id labore molestiae nam quas quisquam, sapiente sequi ut voluptatibus. 
    </div> 
    </div> 
</div>