बूटस्ट्रैप 3: चयनित टैब को पेज रिफ्रेश पर रखें

Question

मैं बूटस्ट्रैप 3 के साथ चयनित टैब को सक्रिय रखने की कोशिश कर रहा हूं । कोशिश की और कुछ सवाल के साथ जाँच की यहाँ पहले से ही पूछा गया था, लेकिन मेरे लिए काम का कोई भी नहीं। पता नहीं मैं कहां गलत हूं। यहाँ मेरा कोड है

एचटीएमएल

<!-- tabs link -->
<ul class="nav nav-tabs" id="rowTab">
    <li class="active"><a href="#personal-info" data-toggle="tab">Personal Information</a></li>
    <li><a href="#Employment-info" data-toggle="tab">Employment Information</a></li>
    <li><a href="#career-path" data-toggle="tab">Career Path</a></li>
    <li><a href="#warnings" data-toggle="tab">Warning</a></li>
</ul>
<!-- end: tabs link -->

<div class="tab-content">
    <div class="tab-pane active" id="personal-info">
        tab data here...
    </div>

    <div class="tab-pane" id="Employment-info">
        tab data here...
    </div>

    <div class="tab-pane" id="career-path">
        tab data here...
    </div>

    <div class="tab-pane" id="warnings">
        tab data here...
    </div>
</div>

जावास्क्रिप्ट :

// tab
$('#rowTab a:first').tab('show');

//for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//save the latest tab; use cookies if you like 'em better:
localStorage.setItem('selectedTab', $(e.target).attr('id'));
});

//go to the latest tab, if it exists:
var selectedTab = localStorage.getItem('selectedTab');
if (selectedTab) {
  $('#'+selectedTab).tab('show');
}

Comments

कारण यह काम नहीं कर रहा है, क्योंकि यह चयनित टैब को संग्रहीत नहीं कर रहा है। जब मैंने किया console.log("selectedTab::"+selectedTab);, मुझे मिला selectedTab::undefined:। इसलिए आपके द्वारा लागू किया गया तर्क सही नहीं है

— द डार्क नाइट

तो क्या आप मुझे मार्गदर्शन कर सकते हैं कि मुझे क्या करना है?

— कोड लवर

मैं इसे ठीक करने की कोशिश कर रहा हूं। यदि मैं करता हूं, तो मैं आपके लिए यहां जवाब दूंगा

— डार्क नाइट

मैं इस बात की सराहना करता हूं कि .. मदद करने के लिए धन्यवाद ..

— कोड प्रेमी

मुझे लगता है कि इस वसीयत काम: jsbin.com/UNuYoHE/2/edit । अगर यह मुझे पता है, तो मैं एक कुरकुरा तरीके से जवाब पोस्ट करूँगा। तुम भी div टैब ग्रंथों को देखना चाहते हो सकता है। जब आप उन्हें क्लिक करते हैं तो वे उचित प्रतिक्रिया नहीं देते हैं। उदाहरण के लिए, यदि आप टैब 4 पर क्लिक करते हैं, तो आपको टैब 1 टेक्स्ट मिलता है।

— डार्क नाइट

Answer 1

मैं विंडो के हैशवल्यू में चयनित टैब को संग्रहीत करना पसंद करता हूं। यह सहयोगियों को लिंक भेजने में भी सक्षम बनाता है, जो "समान" पृष्ठ देखते हैं। जब किसी अन्य टैब का चयन किया जाता है तो ट्रिक को स्थान का हैश बदलना होता है। यदि आप पहले से ही अपने पृष्ठ में # का उपयोग करते हैं, तो संभवतः हैश टैग को विभाजित करना होगा। मेरे ऐप में, मैं ":" का उपयोग हैश मूल्य विभाजक के रूप में करता हूं।

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">home</div>
  <div class="tab-pane" id="profile">profile</div>
  <div class="tab-pane" id="messages">messages</div>
  <div class="tab-pane" id="settings">settings</div>
</div>

जावास्क्रिप्ट, एक <script>...</script>हिस्से में उपरोक्त के बाद एम्बेड किया जाना है ।

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

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
  var id = $(e.target).attr("href").substr(1);
  window.location.hash = id;
});

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');

Comments

स्क्रिप्ट अनुभाग में, आप के अंत में एक सेमी-कोलन जोड़ना चाहिए e.preventDefault();और$(this).tab('show');

— शॉन एडम्स-Hiett

जब आप उस पर क्लिक करते हैं तो दुर्भाग्य से ब्राउज़र टैब सामग्री पर जा रहा है। जब आप window.location.hash मान सेट करते हैं तो यह डिफ़ॉल्ट व्यवहार होता है। एक विकल्प पुश.स्टेट का उपयोग हो सकता है लेकिन आपको IE <= 9 के लिए पॉलीफ़िल की आवश्यकता है। अधिक जानकारी के लिए और अन्य वैकल्पिक समाधान stackoverflow.com/questions/3870057/…

— फिलिप माइकल

जब हम तत्व पर क्लिक करते हैं तो क्या आईडी में "नकली स्क्रॉल" को रोकने का कोई तरीका है?

— पैट्रिस पॉलिकिन

स्क्रॉल टैब पृष्ठों को निर्दिष्ट आईडी के कारण होता है। यदि आप सिमेंटिक आईडी का उपयोग करते हैं और हैश को जोड़ते हैं (अर्थात उपसर्ग / प्रत्यय जोड़ते हैं) तो इसे मान्य आईडी के रूप में मान्यता नहीं दी जाएगी और कोई स्क्रॉल नहीं होगा। इसके साथ उत्तर का विस्तार करेंगे।

— एलेक्स माजारिओल

@koppor यह काम करता है, लेकिन जब मैं दूसरे सहेजे गए टैब (लिंक के माध्यम से) पर सीधे कूदता हूं, तो यह लिंक के टैब में कूदने से पहले घर के टैब या पहले टैब को लगभग 1 सेकंड पहले प्रदर्शित करता है .. किसी भी विचार को पहले प्रदर्शित करने से रोकने के लिए। टैब की जरूरत नहीं है?

— मैबॉय

Answer 2

यह सबसे अच्छा है जो मैंने कोशिश की:

$(document).ready(function() {
    if (location.hash) {
        $("a[href='" + location.hash + "']").tab("show");
    }
    $(document.body).on("click", "a[data-toggle='tab']", function(event) {
        location.hash = this.getAttribute("href");
    });
});
$(window).on("popstate", function() {
    var anchor = location.hash || $("a[data-toggle='tab']").first().attr("href");
    $("a[href='" + anchor + "']").tab("show");
});

Comments

यह एक स्वीकृत समाधान से बेहतर काम करता है (बेहतर तरीके से मेरा मतलब है: कॉपी और पेस्ट काम करता है: डी)

— सिरिल डचोन-डोरिस

सर्वश्रेष्ठ कॉपी और पेस्ट कभी: P

— घोस्टफ़ ऑक्ट

मुझे लगता है कि चयनकर्ता को बदलना "a[data-toggle=tab]"बेहतर होगा। जिस तरह से चयनकर्ता अब लिखा जाता है, यह एक उदाहरण के लिए एक लिंक पर क्लिक करने पर ब्राउज़र यूआरएल को भी बदल देता है।

— लीफडेनबी

आप चयनकर्ता पर स्ट्रिंग ब्रैकेट जोड़ना चाहते हैं, जैसे '[a href = "' + location.hash + '"]'। एक सिंटैक्स त्रुटि पर ठोकर खाई।

— asadacap

इस का उपयोग करते हुए बूटस्ट्रैप ड्रॉपडाउन के साथ विवादित है (जो उपयोग करते हैं data-toggle="dropdown"और जो मैं एक मामले में टैब के साथ एक ही पृष्ठ पर होता है। जैसे किसी ने यहां सुझाव दिया है, बस मेरे $(document.body).on("click", "a[data-toggle]", function(event) {साथ $(document.body).on("click", "a[data-toggle='tab']", function(event) {चाल की जगह बनाई है।

— जिम्मन

Answer 3

दूसरों के जवाबों के बीच मिश्रण:

• क्लिक पर कोई छलांग नहीं
• स्थान हैश पर सहेजें
• लोकलस्टोरेज पर सेव करें (जैसे: फॉर्म सबमिट के लिए)

• बस कॉपी और पेस्ट;)

  if (location.hash) {
    $('a[href=\'' + location.hash + '\']').tab('show');
  }
  var activeTab = localStorage.getItem('activeTab');
  if (activeTab) {
    $('a[href="' + activeTab + '"]').tab('show');
  }
  
  $('body').on('click', 'a[data-toggle=\'tab\']', function (e) {
    e.preventDefault()
    var tab_name = this.getAttribute('href')
    if (history.pushState) {
      history.pushState(null, null, tab_name)
    }
    else {
      location.hash = tab_name
    }
    localStorage.setItem('activeTab', tab_name)
  
    $(this).tab('show');
    return false;
  });
  $(window).on('popstate', function () {
    var anchor = location.hash ||
      $('a[data-toggle=\'tab\']').first().attr('href');
    $('a[href=\'' + anchor + '\']').tab('show');
  });
  

Comments

शर्म करो मैंने पहले अन्य समाधानों की कोशिश की - यह सबसे अच्छा काम करता है!

— tdc

सबसे अच्छा समाधान मैंने कई अलग-अलग तरीकों से कोशिश की है। टैब सामग्री पर

— कूदना

इस उत्तर के साथ कंटेंट जम्प अभी भी है

— shazyriver

उत्कृष्ट समाधान: कॉपी, पेस्ट, लंच पर जाएं। अच्छा लगा।

— गैरी स्टैंटन

सर्वश्रेष्ठ समाधान कभी

— भाग्यशाली

Answer 4

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

बचाव के लिए लोकलस्टोरेज (थोड़ा बदला हुआ नगीन कोड):

$('a[data-toggle="tab"]').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

$('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {
    var id = $(e.target).attr("href");
    localStorage.setItem('selectedTab', id)
});

var selectedTab = localStorage.getItem('selectedTab');
if (selectedTab != null) {
    $('a[data-toggle="tab"][href="' + selectedTab + '"]').tab('show');
}

Comments

यह सोना है! यह भी modals के साथ काम करता है! बहुत बढ़िया जवाब।

— लीच ओसीओस्की

यह कोड शानदार है, और बहुत अच्छा काम करता है यदि आप चाहते हैं कि टैब चयनित रहे भले ही उपयोगकर्ता साइट छोड़ देता है (सत्र समाप्त होता है) और बाद में वापस आता है। चयन केवल चालू सत्र के दौरान के लिए जारी रहता है और अगले सत्र पर डिफ़ॉल्ट टैब पर लौटता है, "स्थानीयस्टोरेज" के दो उदाहरणों को "सेशनस्टोरेज" से बदल दें।

— गैरी.रे

लघु, मधुर, कॉपी / पेस्ट समाधान जो बूटस्ट्रैप 4 के साथ बहुत अच्छा काम करता है

— सीएफपी समर्थन

वाह जबरदस्त उपाय!

— जिलानी ए

[data-toggle="pill"]गोलियों के लिए

— mxmissile

Answer 5

localStorageसक्रिय टैब को संग्रहीत करने के लिए यह HTML5 का उपयोग करता है

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
   $('#navtab-container a[href="' + activeTab + '"]').tab('show');
}

रेफरी: http://www.tutorialrepublic.com/faq/how-to-keep-the-current-tab-active-on-page-reload-in-bootstrap.php https://www.w3schools.com/bootstrap /bootstrap_ref_js_tab.asp

Comments

यह अच्छा है, लेकिन एक नुकसान यह है कि आप सक्रिय टैब के साथ लिंक साझा करने में सक्षम नहीं होंगे

— lfender6445

यह अच्छा है, लाभ यह मुद्दा परिचय नहीं है, जहां "window.location.hash" जोड़कर हैश URL में http अनुरोध परम को टक्कर और बुरे परम के कारण मूल्य में इस तरह के पृष्ठांकन, और आदि जैसे अन्य http अनुरोध द्वारा पढ़ा है

— गोबर

Answer 6

Xavi Martínez और koppor द्वारा प्रदान किए गए उत्तरों पर खुद को ध्यान में रखते हुए मैं एक समाधान के साथ आया, जो बाद की उपलब्धता के आधार पर url हैश या लोकलस्टोरेज का उपयोग करता है:

function rememberTabSelection(tabPaneSelector, useHash) {
    var key = 'selectedTabFor' + tabPaneSelector;
    if(get(key)) 
        $(tabPaneSelector).find('a[href=' + get(key) + ']').tab('show');

    $(tabPaneSelector).on("click", 'a[data-toggle]', function(event) {
        set(key, this.getAttribute('href'));
    }); 

    function get(key) {
        return useHash ? location.hash: localStorage.getItem(key);
    }

    function set(key, value){
        if(useHash)
            location.hash = value;
        else
            localStorage.setItem(key, value);
    }
}

उपयोग:

$(document).ready(function () {
    rememberTabSelection('#rowTab', !localStorage);
    // Do Work...
});

यह बैक बटन के साथ नहीं रहता है जैसा कि Xavi Martínez के समाधान के लिए है।

Answer 7

मेरा कोड, यह मेरे लिए काम करता है, मैं localStorageएचटीएमएल 5 का उपयोग करता हूं

$('#tabHistory  a').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
});
$("ul.nav-tabs#tabHistory > li > a").on("shown.bs.tab", function(e) {
  var id = $(e.target).attr("href");
  localStorage.setItem('selectedTab', id)
});
var selectedTab = localStorage.getItem('selectedTab');
$('#tabHistory a[href="' + selectedTab + '"]').tab('show');

Answer 8

मैं इस की कोशिश की और यह काम करता है: (कृपया की जगह इस गोली या टैब आपके द्वारा प्रयोग किए)

    jQuery(document).ready(function() {
        jQuery('a[data-toggle="pill"]').on('show.bs.tab', function(e) {
            localStorage.setItem('activeTab', jQuery(e.target).attr('href'));
        });

        // Here, save the index to which the tab corresponds. You can see it 
        // in the chrome dev tool.
        var activeTab = localStorage.getItem('activeTab');

        // In the console you will be shown the tab where you made the last 
        // click and the save to "activeTab". I leave the console for you to 
        // see. And when you refresh the browser, the last one where you 
        // clicked will be active.
        console.log(activeTab);

        if (activeTab) {
           jQuery('a[href="' + activeTab + '"]').tab('show');
        }
    });

मुझे उम्मीद है कि यह किसी की मदद करेगा।

यहाँ परिणाम है: https://jsfiddle.net/neilbannet/ego1ncr5/5/

Answer 9

खैर, यह पहले से ही 2018 में है लेकिन मुझे लगता है कि यह देर से बेहतर है (जैसे टीवी कार्यक्रम में एक शीर्षक), लोल। यहाँ नीचे jQuery कोड है जो मैं अपनी थीसिस के दौरान बनाता हूं।

<script type="text/javascript">
$(document).ready(function(){
    $('a[data-toggle="tab"]').on('show.affectedDiv.tab', function(e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    });
    var activeTab = localStorage.getItem('activeTab');
    if(activeTab){
        $('#myTab a[href="' + activeTab + '"]').tab('show');
    }
});
</script>

और यहां बूटस्ट्रैप टैब के लिए कोड है:

<div class="affectedDiv">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li>
        <li><a data-toggle="tab" href="#sectionB">Section B</a></li>
        <li><a data-toggle="tab" href="#sectionC">Section C</a></li>
    </ul>
    <div class="tab-content">
        <div id="sectionA" class="tab-pane fade in active">
            <h3>Section A</h3>
            <p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
        </div>
        <div id="sectionB" class="tab-pane fade">
            <h3>Section B</h3>
            <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
        </div>
        <div id="sectionC" class="tab-pane fade">
            <h3>Section C</h3>
            <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
        </div>
    </div>
</div>

बूटस्ट्रैप और अन्य मूलभूत चीजों को कॉल करना न भूलें 

यहाँ आपके लिए त्वरित कोड हैं:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

अब आइए स्पष्टीकरण पर आते हैं:

उपरोक्त उदाहरण में jQuery कोड बस तत्व का href विशेषता मान प्राप्त करता है जब एक नया टैब jQuery .attr () विधि का उपयोग करके दिखाया गया है और इसे स्थानीय रूप से उपयोगकर्ता के ब्राउज़र में HTML5 लोकलस्टोरेज ऑब्जेक्ट के माध्यम से सहेजें। बाद में, जब उपयोगकर्ता पृष्ठ को ताज़ा करता है तो वह इस डेटा को पुनः प्राप्त करता है और संबंधित टैब को .tab ('शो') विधि से सक्रिय करता है।

कुछ उदाहरणों के लिए देख रहे हैं? यहाँ आप लोगों के लिए एक है .. https://jsfiddle.net/Wineson123/brseabdr/

काश मेरा जवाब आप सभी की मदद कर सकता .. चीयरियो! :)

Answer 10

चूंकि मैं अभी तक टिप्पणी नहीं कर सकता, इसलिए मैंने ऊपर से उत्तर की नकल की, इससे मुझे वास्तव में मदद मिली। लेकिन मैंने इसे # सहायता के बजाय कुकीज़ के साथ काम करने के लिए बदल दिया था इसलिए मैं परिवर्तन साझा करना चाहता था। यह सक्रिय टैब को केवल एक रिफ्रेश (जैसे मल्टीपल रिडायरेक्ट) की तुलना में लंबे समय तक स्टोर करना संभव बनाता है या जब आईडी पहले से ही उपयोग किया जाता है और आप कोपर्स स्प्लिट विधि को लागू नहीं करना चाहते हैं।

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">home</div>
    <div class="tab-pane" id="profile">profile</div>
    <div class="tab-pane" id="messages">messages</div>
    <div class="tab-pane" id="settings">settings</div>
</div>

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

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
    var id = $(e.target).attr("href").substr(1);
    $.cookie('activeTab', id);
});

    // on load of the page: switch to the currently selected tab
    var hash = $.cookie('activeTab');
    if (hash != null) {
        $('#myTab a[href="#' + hash + '"]').tab('show');
    }
</script>

Comments

अद्यतन के लिए धन्यवाद। वास्तव में मैं इस तरह के संकल्प की तलाश में था, लेकिन जितना समय मैं चाहता था, मुझे काम करने के रूप में केवल @koppor जवाब मिला। वास्तव में अगर हम बैक फीचर का उपयोग करना चाहते हैं तो यह एक शानदार तरीका है। अद्यतन के लिए धन्यवाद

— कोड प्रेमी

Answer 11

मैंने Xavi Martínez द्वारा प्रस्तुत कोड की कोशिश की । यह काम किया, लेकिन IE7 के लिए नहीं। समस्या यह है - टैब किसी भी प्रासंगिक सामग्री को संदर्भित नहीं करते हैं।
इसलिए, मैं इस कोड को उस समस्या को हल करने के लिए पसंद करता हूं।

function pageLoad() {
  $(document).ready(function() {

    var tabCookieName = "ui-tabs-1"; //cookie name
    var location = $.cookie(tabCookieName); //take tab's href

    if (location) {
      $('#Tabs a[href="' + location + '"]').tab('show'); //activate tab
    }

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

    //when content is alredy shown - event activate 
    $('#Tabs a').on('shown.bs.tab', function(e) {
      location = e.target.hash; // take current href
      $.cookie(tabCookieName, location, {
        path: '/'
      }); //write href in cookie
    })
  });
};

Comments

यह अच्छा है, लेकिन एक नुकसान यह है कि आप सक्रिय टैब के साथ लिंक साझा करने में सक्षम नहीं होंगे

— lfender6445

Answer 12

साझा करने के लिए धन्यवाद।

सारे उपाय पढ़कर। मैं एक समाधान के साथ आया जो url हैश या लोकलस्टोरेज का उपयोग करता है जो नीचे दिए गए कोड के साथ उत्तरार्द्ध की उपलब्धता पर निर्भर करता है:

$(function(){
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    })

    var hash = window.location.hash;
    var activeTab = localStorage.getItem('activeTab');

    if(hash){
          $('#project-tabs  a[href="' + hash + '"]').tab('show');   
    }else if (activeTab){
        $('#project-tabs a[href="' + activeTab + '"]').tab('show');
    }
});

Answer 13

बूटस्ट्रैप v4.3.1 के लिए। नीचे कोशिश करें:

$(document).ready(function() {
    var pathname = window.location.pathname; //get the path of current page
    $('.navbar-nav > li > a[href="'+pathname+'"]').parent().addClass('active');
})

Answer 14

Html5 का उपयोग करके मैंने इसे पकाया:

पृष्ठ पर कुछ:

<h2 id="heading" data-activetab="@ViewBag.activetab">Some random text</h2>

व्यूबैग में पृष्ठ / तत्व के लिए आईडी होना चाहिए जैसे: "परीक्षण"

मैंने एक site.js बनाया और पृष्ठ पर विभाजन जोड़ा:

/// <reference path="../jquery-2.1.0.js" />
$(document).ready(
  function() {
    var setactive = $("#heading").data("activetab");
    var a = $('#' + setactive).addClass("active");
  }
)

अब आपको बस इतना करना है कि अपनी आईडी को अपने नावबार में जोड़ना है। उदाहरण के लिए .:

<ul class="nav navbar-nav">
  <li **id="testing" **>
    @Html.ActionLink("Lalala", "MyAction", "MyController")
  </li>
</ul>

सभी डेटा विशेषता की जय हो :)

Answer 15

क्लिक पर छलांग से बचने के लिए Xavi Martínez के जवाब के अलावा

कूदने से बचना

$(document).ready(function(){

    // show active tab

    if(location.hash) {

        $('a[href=' + location.hash + ']').tab('show');
    }

    // set hash on click without jumb

    $(document.body).on("click", "a[data-toggle]", function(e) {

        e.preventDefault();

        if(history.pushState) {

            history.pushState(null, null, this.getAttribute("href"));
        }
        else {

            location.hash = this.getAttribute("href");
        }

        $('a[href=' + location.hash + ']').tab('show');

        return false;
    });
});

// set hash on popstate

$(window).on('popstate', function() {

    var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");

    $('a[href=' + anchor + ']').tab('show');
});

नेस्टेड टैब

विभाजक के रूप में "_" वर्ण के साथ कार्यान्वयन

$(document).ready(function(){

    // show active tab

    if(location.hash) {

        var tabs = location.hash.substring(1).split('_');

        $.each(tabs,function(n){

            $('a[href=#' + tabs[n] + ']').tab('show');
        });         

        $('a[href=' + location.hash + ']').tab('show');
    }

    // set hash on click without jumb

    $(document.body).on("click", "a[data-toggle]", function(e) {

        e.preventDefault();

        if(history.pushState) {

            history.pushState(null, null, this.getAttribute("href"));
        }
        else {

            location.hash = this.getAttribute("href");
        }

        var tabs = location.hash.substring(1).split('_');

        //console.log(tabs);

        $.each(tabs,function(n){

            $('a[href=#' + tabs[n] + ']').tab('show');
        });

        $('a[href=' + location.hash + ']').tab('show');

        return false;
    });
});

// set hash on popstate

$(window).on('popstate', function() {

    var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");

    var tabs = anchor.substring(1).split('_');

    $.each(tabs,function(n){

        $('a[href=#' + tabs[n] + ']').tab('show');
    });

    $('a[href=' + anchor + ']').tab('show');
});

Answer 16

हम onquload के लिए jquery ट्रिगर का उपयोग करते थे, हमारे लिए एक स्क्रिप्ट हिट बटन होता है

$ ( "CLASS_NAME।") ट्रिगर ( 'क्लिक')।

Answer 17

धिक्कार है, ऐसा करने के कई तरीके हैं। मैं यह संक्षिप्त और सरल लेकर आया हूं। आशा है कि यह दूसरों की मदद करेगा।

  var url = document.location.toString();
  if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
  } 

  $('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
    if(e.target.hash == "#activity"){
      $('.nano').nanoScroller();
    }
  })

Answer 18

पृष्ठ को फिर से लोड करने और अपेक्षित टैब को चयनित रखने के बाद एक समाधान है।

मान लें कि डेटा को सहेजने के बाद पुनर्निर्देशित url है: my_url # tab_2

अब निम्नलिखित स्क्रिप्ट के माध्यम से आपका अपेक्षित टैब चयनित रहेगा।

$(document).ready(function(){
    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
        $('.nav-tabs a').removeClass('active');
    }
});

Comments

एंकर टैग में स्वचालित रूप से असाइन किया गया सक्रिय वर्ग, वहाँ $ ('। नेवी-टैब') को हटा देगा। यह स्क्रिप्ट।

— हसीब कमाल