Twitter बूटस्ट्रैप - टैब - URL नहीं बदलता है

Question

मैं ट्विटर बूटस्ट्रैप और इसके "टैब" का उपयोग कर रहा हूं।

मेरे पास निम्नलिखित कोड हैं:

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#add">add</a></li>
    <li><a data-toggle="tab" href="#edit" >edit</a></li>
    <li><a data-toggle="tab" href="#delete" >delete</a></li>
</ul>

टैब ठीक से काम करते हैं, लेकिन URL में #add, #edit, #delete नहीं जोड़ा गया है।

जब मैं data-toggleURL परिवर्तन हटाता हूं , लेकिन टैब काम नहीं करते हैं।

इसके लिए कोई उपाय?

Comments

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

— टिम अबेल

यह stackoverflow.com/q/18999501/873282 के

— koppor

Answer 1

इस कोड को आज़माएं। यह पृष्ठ लोड पर हैश के आधार पर url + टैब खोलने के लिए टैब href जोड़ता है:

$(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() || $('html').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});

Comments

यह बहुत अच्छा काम करता है। +1। लेकिन चयनकर्ता से "हैश && $ .." का कारण शो टैब है, लेकिन "हैश और&" का क्या अर्थ है। धन्यवाद

— richardhell

&&इसका मतलब यह है ANDकि अगर बायाँ भाग सत्य के बराबर है ( hashशून्य, शून्य या रिक्त नहीं है) और सही सही के बराबर है तो कुछ करें, हालाँकि रेखा समाप्त होती है ;इसलिए पहले कुछ नहीं करना है ;और इससे कोई फर्क नहीं पड़ता टैब दिखाया गया है या नहीं और इससे कोई फर्क नहीं पड़ता कि क्या .tab('show')रिटर्न, यह अभी भी कोशिश करेगा। इस तरह से तर्क का मूल्यांकन करते समय, यदि समीकरण का पहला भाग (पहले &&) गलत है, तो मूल्यांकन जारी रखने की कोई आवश्यकता नहीं है, इसलिए टैब नहीं दिखाया जाएगा। आप इस तरह के प्रभाव को प्राप्त कर सकते हैं:if(hash){ $('ul.nav a[href="' + hash + '"]').tab('show'); }

— vahanpwns

टीएल; डीआर: का a && b;अर्थ है प्रयास करें aऔर फिर केवल अगर इसका सही, प्रयास करें b। अगर वे खाली नहीं हैं तो स्ट्रिंग्स सही हैं।

— vahanpwns 23

जब मैं "#" url का उपयोग करता हूं तो मैं इसे कैसे बनाऊंगा ताकि यह शीर्ष पर स्थित पृष्ठ को फिर से लोड करे? अभी यह नीचे स्क्रॉल करता है कि टैब कहां से शुरू होते हैं। मैं वास्तविक पृष्ठ पर शीर्ष को स्क्रॉल करना चाहता हूं

— किबेकर

ठीक काम करता है, लेकिन "$ ('। nav-tabs a') को बदलना पड़ा। क्लिक करें (" by "$" ('# navtabs a')। बूटस्ट्रैप 3 पर '(दिखाया गया ।bs.tabs) "

— Zzirconium

Answer 2

पूर्ण समाधान के लिए तीन घटक आवश्यक हैं:

1. यदि URL में कोई हैश है तो पृष्ठ लोड होने पर सही टैब दिखाएं।
2. टैब बदलने पर URL में हैश बदलना।
3. जब URL (बैक / फॉरवर्ड बटन) में हैश बदल जाता है, तो टैब बदलें और सुनिश्चित करें कि पहला टैब सही तरीके से साइकल किया गया है।

मुझे नहीं लगता कि यहाँ कोई टिप्पणी है, और न ही स्वीकृत उत्तर, इन सभी परिदृश्यों को संभालते हैं।

जैसा कि इसमें काफी कुछ शामिल है, मुझे लगता है कि यह एक छोटे jQuery प्लगइन के रूप में सबसे साफ है: https://github.com/aidanlister/jquery-stickytabs

आप प्लगइन को कॉल कर सकते हैं जैसे:

$('.nav-tabs').stickyTabs();

मैंने इसके लिए एक ब्लॉग पोस्ट बनाई है, http://aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/

Comments

मैंने इसे स्वयं दिया है git repo: github.com/timabell/jquery.stickytabs - प्लगइन के लिए बहुत धन्यवाद, एक उपचार का काम करता है।

— टिम एबेल

इस समाधान के लिए +1 क्योंकि यह बैक / अगली ब्राउज़िंग पर भी काम करता है जो @tomaszback 'समाधान नहीं करता है। धन्यवाद!

— बिटफिडग

यह बहुत अच्छा है और अच्छी तरह से काम करता है, लेकिन तब नहीं जब मैं URL में पेज को हैश के साथ लोड करता हूं। यह सुनिश्चित करने के लिए चारों ओर खुदाई करते रहेंगे कि यह कुछ ऐसा है जिसे मैंने गलत (अत्यधिक संभावना) किया है। हालाँकि, मैं इसे एक +1

— मैटबूतडेव

Answer 3

टैब का उपयोग data-toggle="tab" करने के लिए प्लगइन का उपयोग करने के लिए कहता है , जो करते समय यह preventDefaultईवेंट पर कॉल करता है ( जीथब पर कोड )।

आप अपने स्वयं के टैब सक्रियण का उपयोग कर सकते हैं, और इस घटना से गुजर सकते हैं:

$('.nav-tabs a').click(function (e) {
    // No e.preventDefault() here
    $(this).tab('show');
});

और आपको विशेषता को निकालना होगा data-toggle="tab"

संदेह होने पर डॉक्टर की जाँच करें ।

Answer 4

जैसा कि आपके एंकर तत्वों ने पहले ही url हैश बदल दिया है, onhashchange घटना को सुनना एक और अच्छा विकल्प है। जैसा कि @flori पहले ही उल्लेख किया गया है, यह विधि ब्राउज़र बैक बटन के साथ अच्छा काम करती है।

var tabs$ = $(".nav-tabs a");

$( window ).on("hashchange", function() {
    var hash = window.location.hash, // get current hash
        menu_item$ = tabs$.filter('[href="' + hash + '"]'); // get the menu element

    menu_item$.tab("show"); // call bootstrap to show the tab
}).trigger("hashchange");

अंत में, श्रोता को परिभाषित करने के ठीक बाद घटना को ट्रिगर करना पेज लोड पर सही टैब दिखाने में भी मदद करेगा।

Answer 5

आपकी समस्या का मेरा समाधान:

data-valueप्रत्येक aलिंक पर पहले नई विशेषता जोड़ें , जैसे:

<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#tab-add" data-value="#add">add</a>
    </li>
    <li>
        <a data-toggle="tab" href="#tab-edit" data-value="#edit">edit</a>
    </li>
    <li>
        <a data-toggle="tab" href="#tab-delete" data-value="#delete">delete</a>
    </li>
</ul>

दूसरा, टैब, से जैसे के परिवर्तन आईडी addको tab-addभी अद्यतन hrefs शामिल करने के लिए, tab-उपसर्ग:

<div class="tab-content">
    <div class="tab-pane" id="tab-add">Add panel</div>
    <div class="tab-pane" id="tab-edit">Edit panel</div>
    <div class="tab-pane" id="tab-delete">Panel panel</div>
</div>

और अंत में js कोड:

<script type="text/javascript">
    $(function () {
        var navTabs = $('.nav-tabs a');
        var hash = window.location.hash;
        hash && navTabs.filter('[data-value="' + hash + '"]').tab('show');

        navTabs.on('shown', function (e) {
            var newhash = $(e.target).attr('data-value');
            window.location.hash = newhash;
        });
    })
</script>

यहाँ jsFiddle है - लेकिन यह jsFiddle द्वारा उपयोग किए गए iframe के कारण काम नहीं करता है, लेकिन आप मेरे समाधान के स्रोत को पढ़ सकते हैं।

Answer 6

बूटस्ट्रैप 3 टैब्स के साथ CakePHP के साथ एक ही समस्या है, साथ ही जब मैं बाहरी URL और एंकर के साथ भेजता हूं, तो यह मेरे मेनू को खोने वाले अनुभाग पर कूदता है, कई समाधानों की समीक्षा के बाद ...

इसके लिए धन्यवाद: http://ck.kennt-wayne.de/2012/dec/twitter-bootstrap-how-to-fix-tabs

$(document).ready(function()
 {  
//Redirecciona al tab, usando un prefijo al cargar por primera vez, al usar redirect en cake #_Pagos    
//Redirecciona al tab, usando #Pagos
/* Automagically jump on good tab based on anchor; for page reloads or links */
 if(location.hash) 
  {
     $('a[href=' + location.hash + ']').tab('show');         
  }


//Para evitar el bajar al nivel del tab, (al mostrarse el tab subimos)
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) 
{
    location.hash = $(e.target).attr('href').substr(1);
    scrollTo(0,0);      
});



//Actualiza el URL con el anchor o ancla del tab al darle clic
 /* Update hash based on tab, basically restores browser default behavior to
 fix bootstrap tabs */
$(document.body).on("click", "a[data-toggle]", function(event) 
  {
    location.hash = this.getAttribute("href");
  });


//Redirecciona al tab, al usar los botones de regresar y avanzar del navegador.
/* on history back activate the tab of the location hash if exists or the default tab if no hash exists */   
$(window).on('popstate', function() 
{
  //Si se accesa al menu, se regresa al tab del perfil (activo default), fixed conflict with menu
  //var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
  var anchor = location.hash;
  $('a[href=' + anchor + ']').tab('show');

});   

});//Fin OnReady

Answer 7

हैश परिवर्तन (जैसे बैक बटन) पर प्रतिक्रिया करने का एक सरल तरीका भी है। बस एक हैशचेंज घटना श्रोता tomaszbak समाधान में जोड़ें:

$(function(){
  // Change tab on load
  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);
  });

  // Change tab on hashchange
  window.addEventListener('hashchange', function() {
    var changedHash = window.location.hash;
    changedHash && $('ul.nav a[href="' + changedHash + '"]').tab('show');
  }, false);
});

Answer 8

मैं बूटस्ट्रैप 3.3 का उपयोग कर रहा हूं। * उपरोक्त समाधान में से किसी ने भी मेरी मदद नहीं की, यहां तक ​​कि उत्तर के रूप में भी चिह्नित किया गया। मैंने बस स्क्रिप्ट के नीचे जोड़ा और काम किया।

$(function(){
    var hash = document.location.hash;
    if (hash) {
       $('.navbar-nav a[href="' + hash + '"]').tab('show');
    }
    $('a[data-toggle="tab"]').on('click', function (e) {
       history.pushState(null, null, $(this).attr('href'));
    });
});

आशा है कि यह आपकी मदद करता है।

Answer 9

सबसे सरल, मान लें कि आप यहाँdata-toggle="tab" वर्णित दस्तावेज़ सिंटैक्स का उपयोग कर रहे हैं :

$(document).on('shown.bs.tab', function(event) {
  window.location.hash = $(event.target).attr('href');
});

Comments

यह URL बदल देता है, लेकिन एक विशिष्ट टैब खोलने के लिए लिंक पर क्लिक करने पर वहां नहीं जा सकता है

— ख्रुस

Answer 10

रूबी ऑन रेल्स या किसी अन्य सर्वर साइड स्क्रिप्ट का उपयोग करने वालों के लिए, आप anchorरास्तों पर विकल्प का उपयोग करना चाहेंगे । ऐसा इसलिए है क्योंकि एक बार पेज लोड होने के बाद, इसमें URL हैश उपलब्ध नहीं होता है। आप अपने लिंक या फ़ॉर्म सबमिशन के माध्यम से सही टैब की आपूर्ति करना चाहेंगे।

<%= form_for @foo, url: foo_path(@foo, anchor: dom_id(foo)) do |f| %>
# Or
<%= link_to 'Foo', foo_path(@foo, anchor: dom_id(foo)) %>

यदि आप विंडो को जंप करने से रोकने के लिए उपसर्ग का उपयोग कर रहे हैं:

<%= form_for @foo, url: foo_path(@foo, anchor: "bar_#{dom_id(foo)}") do |f| %>

फिर आप कॉफीस्क्रिप्ट:

  hash = document.location.hash
  prefix = 'bar_'
  $('.nav-tabs a[href=' + hash.replace(prefix, '') + ']').tab 'show' if hash
  $('.nav-tabs a').on 'shown.bs.tab', (e) ->
    window.location.hash = e.target.hash.replace '#', '#' + prefix

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

var hash, prefix;

hash = document.location.hash;
prefix = 'bar_';

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

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

यह बूटस्ट्रैप 3 में काम करना चाहिए।

Answer 11

हालांकि मूल समाधान के लिए @tomaszbak का धन्यवाद क्योंकि मेरे संपादन अस्वीकृत हो गए और मैं उनकी पोस्ट पर टिप्पणी करने में असमर्थ हूं, फिर भी मैं अपने थोड़े बेहतर और अधिक पठनीय संस्करण को यहां छोड़ दूंगा।

यह मूल रूप से एक ही बात करता है, लेकिन अगर मैं उसके साथ क्रॉस ब्राउज़र संगतता समस्या को ठीक करता हूं।

$(document).ready(function(){
   // go to hash on window load
   var hash = window.location.hash;
   if (hash) {
       $('ul.nav a[href="' + hash + '"]').tab('show');
   }
   // change hash on click
   $('.nav-tabs a').click(function (e) {
       $(this).tab('show');
       if($('html').scrollTop()){
           var scrollmem = $('html').scrollTop(); // get scrollbar position (firefox)
       }else{
           var scrollmem = $('body').scrollTop(); // get scrollbar position (chrome)
       }
       window.location.hash = this.hash;
       $('html,body').scrollTop(scrollmem); // set scrollbar position
   });
});

Comments

अस्वीकृत मेरे लिए काम नहीं कर रहा था (शायद यह फ़ायरफ़ॉक्स संस्करण था)। वैसे भी, मैंने var scrollmem = $ ('body') में परिवर्तन किया है। scrollTop () || $ ( 'एचटीएमएल') scrollTop ()।; धन्यवाद!

— tomaszbak

हाँ। मुझे उस पल के बारे में बताएं जो आपने कहा था कि मुझे एहसास हुआ कि यह ब्राउज़र की चीज़ थी जो जल्दी से क्रोम में चली गई। मुझे यकीन है कि इच्छा थी कि संपादन समीक्षाओं पर टिप्पणी करने का एक तरीका था।

— फॉक्स

Answer 12

यहां एक विकल्प का उपयोग किया गया है history.pushStateताकि आप अपने ब्राउज़र इतिहास का उपयोग पिछले टैब पर वापस जाने के लिए कर सकें

  $(document).ready(function() {
  // add a hash to the URL when the user clicks on a tab
  $('a[data-toggle="tab"]').on('click', function(e) {
    history.pushState(null, null, $(this).attr('href'));
  });
  // navigate to a tab when the history changes
  window.addEventListener("popstate", function(e) {
    var activeTab = $('[href=' + location.hash + ']');
    if (activeTab.length) {
      activeTab.tab('show');
    } else {
      $('.nav-tabs a:first').tab('show');
    }
  });
});

Answer 13

उपरोक्त में से कोई भी मेरे लिए काम नहीं करता है, इसलिए यहाँ मेरा काम करने का तरीका है:

1. class="tab-link"इस कार्यक्षमता की आवश्यकता वाले सभी लिंक में जोड़ें
2. अपनी जावास्क्रिप्ट में निम्नलिखित कोड जोड़ें:

    window.addEventListener
    (
        'Popstate',
        समारोह (घटना)
        {
            tab_change ();
        }
    );

    फ़ंक्शन tab_change ()
    {
        var हैश = window.location.hash;
        हैश && $ ('ul.nav a [href = "' + हैश + '"])) .tab (' शो ');

        $ ('.tab-link') .click
        (
            कार्य (ई)
            {
                $ (यह) .tab ('शो');

                var स्क्रॉलम = $ ('शरीर') .scrollTop () || $ ('html') .scrollTop ();
                window.location.hash = this.hash;
                $ ('html, बॉडी') .scrollTop (स्क्रॉलम);

                $ ('ul.nav-tabs a [href = "' + window.location.hash + '']]) .tab ('शो');
            }
        );
    }

Answer 14

मैं समझ गया कि ओपी ने JQuery का उपयोग करते हुए कहा है लेकिन आप ऐसा करने के लिए बस वेनिला JS का उपयोग कर सकते हैं:

document.querySelectorAll('ul.nav a.nav-link').forEach(link => {
    link.onclick = () => window.history.pushState(null, null, link.attributes.href.value);
});

Answer 15

यह एक अत्यंत अस्पष्ट टैब को भी ठीक करता है जब jquery और बूटस्ट्रैप का उपयोग करते समय फायरिंग नहीं होती है

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

<script type="text/javascript">
$('.nav-tabs a').click(function (e) {
    // No e.preventDefault() here.
    $(this).tab('show');
});
</script>

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>

Comments

-1 मैं यह नहीं देखता कि यह उत्तर 3 महीने पहले दिए गए पहले के पिछले उत्तरों में से किसी भी मूल्य को कैसे जोड़ता है, उत्तर में ठीक उसी कोड के साथ। इसलिए मेरी विनम्र राय में एक उपयोगी जवाब नहीं।

— नोप।