ट्विटर बूटस्ट्रैप टैब: पेज रीलोड या हाइपरलिंक पर विशिष्ट टैब पर जाएं

Question

मैं एक वेब पेज विकसित कर रहा हूं जिसमें मैं ट्विटर के बूटस्ट्रैप फ्रेमवर्क और उनके बूटस्ट्रैप टैब्स जेएस का उपयोग कर रहा हूं । यह कुछ मामूली मुद्दों को छोड़कर महान काम करता है, जिनमें से एक यह है कि मुझे नहीं पता कि बाहरी लिंक से किसी विशिष्ट टैब पर सीधे कैसे जाएं। उदाहरण के लिए:

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

बाहरी पृष्ठ से लिंक पर क्लिक करने पर क्रमशः होम टैब और नोट्स टैब पर जाना चाहिए

Comments

काश यह में बनाया गया था!

— डेमोन

इस प्रश्न को भी यहाँ लाया गया है: github.com/twitter/bootstrap/issues/2415 (और वहाँ कुछ समाधान है)।

— Ztyx

इससे मुझे मदद मिली -> stackoverflow.com/questions/12131273/…

— JGilmartin

बूटस्ट्रैप समस्या का अद्यतन लिंक github.com/twbs/bootstrap/issues/2415

— bmihelac

प्लगिन जो इसे ठीक करता है: github.com/timabell/jquery.stickytabs

— Tim Abell

Answer 1

यहाँ समस्या का मेरा समाधान है, शायद थोड़ा देर से। लेकिन यह दूसरों की मदद कर सकता है:

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

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})

Comments

मैं window.scrollTo(0, 0);यह सुनिश्चित करने के लिए 1 और अतिरिक्त पंक्ति जोड़ूंगा कि विंडो हमेशा ऊपर की ओर स्क्रॉल हो

— Trung Lê

$ ('। nav-tabs a [href * = #' + url.split ('#') [1] + ']') tab ('show'); // के साथ एक * के बाद से यह सुरक्षित है अन्यथा यह केवल पहले # से मेल खाता है ...

— मैट्रैंग्रीफेल

ऑनलाइन जिसने मेरे लिए काम किया: window.location.hash && $ ('li a [href = "' + window.location.hash + '" "])। Tab (' show ')। ट्रिगर (" क्लिक ");

— डीन मेहान

यहाँ बूटस्ट्रैप 3 के लिए एक डेमो है: bootply.com/render/VQqzOawoYc#tab2 और स्रोत कोड

— Zim

1.09 से 1.11 में उन्नयन के बाद मुझे यह त्रुटि मिलती है Syntax error, unrecognized expression: .nav-tabs a[href=#tab-2]:। हल का उपयोग कर stackoverflow.com/questions/12131273/...

— पिएत्रो जेड

Answer 2

अपडेट करें

बूटस्ट्रैप 3 के लिए, बदलने .on('shown', ...)के लिए.on('shown.bs.tab', ....)

---

यह @ डबबे उत्तर और एसओ द्वारा स्वीकार किए गए उत्तर पर आधारित है । यह window.scrollTo(0,0)सही ढंग से काम नहीं करने के साथ समस्या को संभालता है। समस्या यह है कि जब आप दिखाए गए टैब पर url हैश की जगह लेते हैं, तो ब्राउज़र पृष्ठ पर एक तत्व के बाद से उस हैश तक स्क्रॉल करेगा। इसके चारों ओर जाने के लिए, उपसर्ग जोड़ें ताकि हैश वास्तविक पृष्ठ तत्व का संदर्भ न दे

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

उपयोग का उदाहरण

अगर आपके पास id = "mytab" वाला टैब-पैन है, तो आपको अपना लिंक इस तरह से डालना होगा:

<a href="yoursite.com/#tab_mytab">Go to Specific Tab </a>

Comments

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

— नाइज करें

@ यदि आप जो कुछ करने की कोशिश कर रहे हैं, उसके साथ एक jsfiddle बनाएं, तो मैं एक नज़र लेने की कोशिश करूंगा।

— फ्लाईनफिश

यहां बूटस्ट्रैप 3 के लिए एक बूटली डेमो है: bootply.com/render/VQqzOawoYc#tab2 और स्रोत कोड

— Zim

ऊपर का उदाहरण हाइपर पर दोहरे उद्धरण चिह्नों को याद कर रहा है। पंक्ति ५ होनी चाहिए:$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');

— पोनबॉय

मेरे लिए काम करता है सिवाय इसके कि मुझे 'Yourite.com/anotherpage/#tab_mytab' में अंतिम फॉरवर्ड स्लैश (# से पहले) को निकालना पड़ा अन्यथा यह पेज लोडिंग के साथ कहर ढाता था।

— सिकंदर

Answer 3

आप clickसंबंधित टैब लिंक पर ईवेंट को ट्रिगर कर सकते हैं :

$(document).ready(function(){

  if(window.location.hash != "") {
      $('a[href="' + window.location.hash + '"]').click()
  }

});

Comments

पारितोषिक के लिए धन्यवाद! यह एक छोटी सी समस्या के साथ महान काम किया। पृष्ठ को ताज़ा करते हुए, इसे सही टैब पर नहीं ले जाएगा। मारना Ctrl + F5 होगा। मैंने निम्नलिखित को कोड संशोधित किया: `$ (दस्तावेज़)। पहले से ही (फ़ंक्शन () {फ़ंक्शन getUrlVars () {var vars = {}; var भागों = window.location.href.replace (/ [??] + ([) ^ = &] +) = ([^ &] * / gi, फ़ंक्शन (m, कुंजी, मान) {vars [key] = value;}); वापसी var;} var क्रिया = getUrlVars () ["कार्रवाई" ]; यदि (क्रिया! = "") {$ ((एक [href = "# '+ क्रिया +'"] ’); क्लिक करें ()};}); `

— mraliks

Answer 4

यह डब्बे के समाधान का एक बेहतर कार्यान्वयन है जो स्क्रॉलिंग को रोकता है।

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

// With HTML5 history API, we can easily prevent scrolling!
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    if(history.pushState) {
        history.pushState(null, null, e.target.hash); 
    } else {
        window.location.hash = e.target.hash; //Polyfill for old browsers
    }
})

Answer 5

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

<a href = "http://link.to.yourpage?activeTab=home">My Link</a>

फिर आप बस उपयुक्त में 'वर्ग = "सक्रिय" "लिखने के लिए एक्टिवटैब के मान का पता लगाते हैं <li>

स्यूडोकोड (अपनी भाषा में तदनुसार लागू करें)। ध्यान दें कि मैंने 'होम' टैब को एक डिफ़ॉल्ट सक्रिय के रूप में सेट किया है यदि इस उदाहरण में कोई पैरामीटर प्रदान नहीं किया गया है।

$activetabhome = (params.activeTab is null or params.activeTab == 'home') ? 'class="active"' : '';
$activetabprofile = (params.activeTab == 'profile') ? 'class="active"' : '';

<li $activetabhome><a href="#home">Home</a></li>
<li $activetabprofile><a href="#profile">Profile</a></li>

Comments

मैं एक सरल कारण के कारण JS समाधान के लिए आपका समाधान पसंद करता हूं, वह यह है कि JS location.hash ID पर कूद जाएगा जिससे कर्सर की स्थिति ऊपर और नीचे जाती है।

— Trung Lê

मैं इस समाधान को पसंद करता हूं। वास्तव में, मैंने अपने अनुसार सक्रिय वर्ग निर्धारित करके टैब और फिर से उत्पन्न दृश्य के लिए नए मार्ग बनाए। यह पृष्ठ आकार परिवर्तन, url हैश और पेज स्क्रॉलिंग से एक साथ बचता है।

— विजय मीणा

Answer 6

मैं बहुत बड़ा प्रशंसक नहीं हूं अगर ... और; इसलिए मैंने एक सरल तरीका अपनाया।

$(document).ready(function(event) {
    $('ul.nav.nav-tabs a:first').tab('show'); // Select first tab
    $('ul.nav.nav-tabs a[href="'+ window.location.hash+ '"]').tab('show'); // Select tab by name if provided in location hash
    $('ul.nav.nav-tabs a[data-toggle="tab"]').on('shown', function (event) {    // Update the location hash to current tab
        window.location.hash= event.target.hash;
    })
});

1. डिफ़ॉल्ट टैब चुनें (आमतौर पर पहले)
2. टैब पर जाएं (यदि ऐसा कोई तत्व वास्तव में मौजूद है, तो jQuery को संभाल लें); यदि कोई गलत हैश निर्दिष्ट करता है, तो कुछ भी नहीं होता है
3. [वैकल्पिक] एक और टैब मैन्युअल रूप से चुने जाने पर हैश को अपडेट करें

स्क्रॉल करने के लिए अनुरोधित हैश को संबोधित नहीं करता; लेकिन यह होना चाहिए ?

Answer 7

बूटस्ट्रैप 3 के लिए:

$('.nav-tabs a[href="#' + tabID + '"]').tab('show');

https://jsfiddle.net/DTcHh/6638/

Answer 8

यह बूटस्ट्रैप 3 में काम करता है और डर्बी और फ्लाईनफिश के 2 शीर्ष उत्तरों को गार्सियावेबदेव के उत्तर के साथ एकीकृत करता है (जो हैश के बाद यूआरएल मापदंडों की अनुमति देता है और जीथब इश्यू ट्रैकर पर बूटस्ट्रैप लेखकों से सीधे है):

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";

if (hash) {
    hash = hash.replace(prefix,'');
    var hashPieces = hash.split('?');
    activeTab = $('.nav-tabs a[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

Comments

यह बूटस्ट्रैप 3 में काम नहीं करता है, डॉक्स के अनुसार 'shown'होना चाहिए 'shown.bs.tab': getbootstrap.com/javascript/#tabs-events । मैं इस बात से

— हैरान

Answer 9

यह कोड #hash के आधार पर सही टैब का चयन करता है और जब एक टैब पर क्लिक किया जाता है तो सही #hash जोड़ता है। (यह jquery का उपयोग करता है)

कॉफ़ीस्क्रिप्ट में:

$(document).ready ->
    if location.hash != ''
        $('a[href="'+location.hash+'"]').tab('show')

    $('a[data-toggle="tab"]').on 'shown', (e) ->
        location.hash = $(e.target).attr('href').substr(1)

या जेएस में:

$(document).ready(function() {
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
    return $('a[data-toggle="tab"]').on('shown', function(e) {
      return location.hash = $(e.target).attr('href').substr(1);
    });
});

Comments

jquery लोड होने के बाद इसे लगाना सुनिश्चित करें। मैं इसे एक पृष्ठ के बीच में रख रहा था (यह परीक्षण के लिए सम्मिलित करने के लिए एक आसान स्थान था) और यह काम नहीं किया। मैं लोड करने के बाद इसे डालना jquery महान काम करता है।

— रॉन

Answer 10

Demircan Celebi के समाधान पर निर्माण; मैं टैब को खोलना चाहता था जब सर्वर से पृष्ठ को फिर से लोड किए बिना url और खुले टैब को संशोधित किया जाए।

<script type="text/javascript">
    $(function() {
        openTabHash(); // for the initial page load
        window.addEventListener("hashchange", openTabHash, false); // for later changes to url
    });


    function openTabHash()
    {
        console.log('openTabHash');
        // Javascript to enable link to tab
        var url = document.location.toString();
        if (url.match('#')) {
            $('.nav-tabs a[href="#'+url.split('#')[1]+'"]').tab('show') ;
        } 

        // With HTML5 history API, we can easily prevent scrolling!
        $('.nav-tabs a').on('shown.bs.tab', function (e) {
            if(history.pushState) {
                history.pushState(null, null, e.target.hash); 
            } else {
                window.location.hash = e.target.hash; //Polyfill for old browsers
            }
        })
    }
</script>

Answer 11

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});

Http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768 से इस कोड ने मेरे लिए पूरी तरह से काम किया।

Answer 12

@flynfish + @Ztyx समाधान जिसका उपयोग मैं नेस्टेड टैब के लिए करता हूं:

    handleTabLinks();

    function handleTabLinks() {
        if(window.location.hash == '') {
            window.location.hash = window.location.hash + '#_';
        }
        var hash = window.location.hash.split('#')[1];
        var prefix = '_';
        var hpieces = hash.split('/');
        for (var i=0;i<hpieces.length;i++) {
            var domelid = hpieces[i].replace(prefix,'');
            var domitem = $('a[href=#' + domelid + '][data-toggle=tab]');
            if (domitem.length > 0) {
                domitem.tab('show');
            }
        }
        $('a[data-toggle=tab]').on('shown', function (e) {
            if ($(this).hasClass('nested')) {
                var nested = window.location.hash.split('/');
                window.location.hash = nested[0] + '/' + e.target.hash.split('#')[1];
            } else {
                window.location.hash = e.target.hash.replace('#', '#' + prefix);
            }
        });
    }

बच्चों का वर्ग = "नेस्टेड" होना चाहिए

Answer 13

मैं एक समाधान के साथ आया जो 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 14

मेरा सुझाव है कि आप बूटस्ट्रैप लेखकों द्वारा उनके मुद्दे पर GitHub पर दिए गए कोड का उपयोग करें :

var hash = location.hash
  , hashPieces = hash.split('?')
  , activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');

आप इस मुद्दे के लिंक पर पा सकते हैं कि वे इस बारे में अधिक जानकारी क्यों नहीं चुनते कि वे समर्थन करना चाहते हैं।

Answer 15

ऊपर काम करने के तरीकों की कोशिश की और काम कर रहे समाधान के साथ समाप्त करने की कोशिश की, बस कॉपी करें और अपने संपादक में पेस्ट करने की कोशिश करें। बस हैश को इनबॉक्स, आउटबॉक्स में बदलने के लिए, url में लिखें और एंटर कुंजी दबाएं।

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container body-content">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#inbox">Inbox</a></li>
                <li><a data-toggle="tab" href="#outbox">Outbox</a></li>
                <li><a data-toggle="tab" href="#compose">Compose</a></li>
            </ul>
            <div class="tab-content">
                <div id="inbox" class="tab-pane fade in active">
                    Inbox Content
                </div>
                <div id="outbox" class="tab-pane fade">
                    Outbox Content
                </div>
                <div id="compose" class="tab-pane fade">
                    Compose Content
                </div>
            </div>
        </div>
        <script>
            $(function () {
                var hash = window.location.hash;
                hash && $('ul.nav a[href="' + hash + '"]').tab('show');
            });
        </script>
    </body>
</html>

आशा है कि इससे आपका समय बचेगा।

Answer 16

यहां मैंने वही किया है, जो वास्तव में सरल है, और आपके टैब लिंक प्रदान किए गए हैं, उनके साथ एक आईडी जुड़ी हुई है जिससे आप href विशेषता प्राप्त कर सकते हैं और उस फ़ंक्शन को पास कर सकते हैं जो टैब सामग्री दिखाता है:

<script type="text/javascript">
        jQuery(document).ready(function() {
            var hash = document.location.hash;
            var prefix = "tab_";
            if (hash) {
                var tab = jQuery(hash.replace(prefix,"")).attr('href');
                jQuery('.nav-tabs a[href='+tab+']').tab('show');
            }
        });
        </script>

फिर आपके url में आप हैश को कुछ इस तरह से जोड़ सकते हैं: # tab_tab1, 'tab_' भाग को हैश से ही हटा दिया जाता है, इसलिए नेवी-टैब (tabid1) में वास्तविक टैब लिंक की आईडी इसके साथ रखी जाती है, इसलिए आपका url कुछ इस तरह दिखाई देगा: www.mydomain.com/index.php#tab_tabid1।

यह मेरे लिए एकदम सही काम करता है और आशा है कि यह किसी और की मदद करता है :-)

Answer 17

नेस्टेड टैब को संभालने के लिए यह मेरा समाधान है। मैंने सिर्फ यह जांचने के लिए एक फ़ंक्शन जोड़ा कि क्या सक्रिय टैब में पैरेंट टैब सक्रिय है। यह समारोह है:

function activateParentTab(tab) {
    $('.tab-pane').each(function() {
        var cur_tab = $(this);
        if ( $(this).find('#' + tab).length > 0 ) {
            $('.nav-tabs a[href=#'+ cur_tab.attr('id') +']').tab('show');
            return false;
        }
    });
}

और इसे इस तरह कहा जा सकता है (@ flynfish के समाधान पर आधारित):

var hash = document.location.hash;
var prefix = "";
if (hash) {
    $('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
    activateParentTab(hash);
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

यह समाधान इस समय मेरे लिए बहुत अच्छा काम करता है। आशा है कि यह किसी और के लिए उपयोगी हो सकता है;)

Answer 18

मुझे इसके लिए काम करने के लिए कुछ बिट्स को संशोधित करना पड़ा। मैं बूटस्ट्रैप 3 और jQuery 2 का उपयोग कर रहा हूं

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "!";
if (hash) {
    hash = hash.replace(prefix,'');
    var hashPieces = hash.split('?');
    activeTab = $('[role="tablist"] a[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
}

// Change hash for page-reload
$('[role="tablist"] a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

Comments

महान जवाब, मुझे छोड़कर "को बदलना पड़ा!" "tab_" के साथ उपसर्ग। अन्यथा पूरी तरह से काम किया।

— कोज़ीज़

Answer 19

बस इस कोड को अपने पेज पर डालें:

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});

Answer 20

मेरे पास बस यह मुद्दा था, लेकिन कई टैब स्तरों को संभालने की आवश्यकता थी। कोड बल्कि बदसूरत है (टिप्पणियों को देखें), लेकिन क्या यह अपना काम करता है: https://gist.github.com/JensRantil/4721860 उम्मीद है कि किसी और को यह उपयोगी लगेगा (और बेहतर समाधान का प्रस्ताव करने के लिए स्वतंत्र महसूस करें!)।

Answer 21

अन्य उत्तरों से पेयन्स को मिलाकर, यहां एक समाधान है जो नेस्टेड टैब के कई स्तरों को खोल सकता है:

// opens all tabs down to the specified tab
var hash = location.hash.split('?')[0];
if(hash) {
  var $link = $('[href=' + hash + ']');
  var parents = $link.parents('.tab-pane').get();
  $(parents.reverse()).each(function() {
    $('[href=#' + this.id + ']').tab('show') ;
  });
  $link.tab('show');
}

Comments

केवल 2 स्तरों के घोंसले के शिकार के लिए काम करता है, तीसरा स्तर समस्याओं का कारण बनता है।

— निकोलस हैमिल्टन

मैंने सिर्फ तीन स्तरों के टैब के खिलाफ इसका परीक्षण किया, और यह मेरे लिए काम करता प्रतीत होता है। क्या आप सुनिश्चित हैं कि यह आपके कार्यान्वयन के साथ कोई समस्या नहीं है? आप कौन सी समस्या का सामना कर रहे हैं?

— पश्चिमोत्तर

1st लेवल और 2nd लेवल का कोई भी टैब ठीक काम करता है, हालाँकि, 3rd लेवल में, पेज को रिफ्रेश करते समय (या फॉर्म को सबमिट करते समय), जब पेज री-ओपन होता है, तो यह फोकस 2 लेवल पर पहले टैब पर दिया जाता है।

— निकोलस हैमिल्टन

तो यह ठीक काम कर रहा था (मेरे कोड में एक मामूली टाइपो था), हालांकि टाइपो सुधार के बाद, केवल $('.nav-tabs li a').click( function(e) { history.pushState( null, null, $(this).attr('href') );});आपके कोड के ऊपर जावास्क्रिप्ट में।

— निकोलस हैमिल्टन

Answer 22

यदि यह किसी के लिए भी मायने रखता है, तो निम्न कोड छोटा है और URL से एकल हैश मान प्राप्त करने के लिए और निर्दोष काम करता है:

<script>
    window.onload = function () {
        let url = document.location.toString();
        let splitHash = url.split("#");
        document.getElementById(splitHash[1]).click();
    };
</script>

यह क्या करता है यह आईडी पुनर्प्राप्त करता है और क्लिक इवेंट को आग देता है। सरल।

Answer 23

मैं ajax #!#(जैसे / test.com #! # Test3) के साथ लिंक के लिए इस तरह से sth बनाता हूं, लेकिन आप जो चाहें इसे संशोधित कर सकते हैं

$(document).ready(function() {

       let hash = document.location.hash;
       let prefix = "!#";

       //change hash url on page reload
       if (hash) {
         $('.nav-tabs a[href=\"'+hash.replace(prefix,"")+'\"]').tab('show');
       } 

       // change hash url on switch tab
       $('.nav-tabs a').on('shown.bs.tab', function (e) {
          window.location.hash = e.target.hash.replace("#", "#" + prefix);
       });
 });

यहाँ Github पर सरल पृष्ठ के साथ उदाहरण

Answer 24

मुझे पता है कि यह धागा बहुत पुराना है, लेकिन मैं यहां अपना कार्यान्वयन छोड़ दूंगा:

$(function () {
  // some initialization code

  addTabBehavior()
})

// Initialize events and change tab on first page load.
function addTabBehavior() {
  $('.nav-tabs a').on('show.bs.tab', e => {
    window.location.hash = e.target.hash.replace('nav-', '')
  })

  $(window).on('popstate', e => {
    changeTab()
  })

  changeTab()
}

// Change the current tab and URL hash; if don't have any hash
// in URL, so activate the first tab and update the URL hash.
function changeTab() {
  const hash = getUrlHash()

  if (hash) {
    $(`.nav-tabs a[href="#nav-${hash}"]`).tab('show')
  } else {
    $('.nav-tabs a').first().tab('show')
  }
}

// Get the hash from URL. Ex: www.example.com/#tab1
function getUrlHash() {
  return window.location.hash.slice(1)
}

ध्यान दें कि मैं एक nav-वर्ग उपसर्ग का उपयोग कर रहा हूँ नव लिंक।