jQuery यूआई टैब, अद्यतन यूआरएल जब एक अलग टैब

Question

मैं jQuery UI का टैब का उपयोग कर रहा हूँ पर क्लिक: http://jqueryui.com/demos/tabs/

ब्राउज़र की वर्तमान यूआरएल अद्यतन करने के लिए कैसे जब एक अलग टैब पर उपयोगकर्ता क्लिक करके इसमें एंकर लिंक जोड़ना: पूर्व: url.html # टैब -4 और एक ही समय में ब्राउज़र के वर्तमान इतिहास को दबाकर।

धन्यवाद!

Answer 1

यह आपको जो चाहिए वह प्राप्त करना चाहिए। मैं jQuery ui क़ौम में नमूना एचटीएमएल इस्तेमाल किया

 $("#tabs").tabs({ 
      select: function(event, ui) {     
       window.location.hash = ui.tab.hash; 
      } 
     }); 

Answer 2

लिए jQuery यूआई 1.10 और बाद में showactivate के पक्ष में पदावनत किया गया है। id अब मान्य jQuery नहीं है। इसके बजाय .attr('id') का उपयोग करें। अंत में, bind() के बजाय on('tabsactivate') का उपयोग करें।

$(function() { 
    $("#tabs").tabs({ 
     activate: function(event, ui) { 
      window.location.hash = ui.newPanel.attr('id'); 
     } 
    }); 
}); 

पोस्ट-निर्माण विधि:

$("#myTabs").on("tabsactivate", function(event, ui) { 
    window.location.hash = ui.panel.id; 
}); 

डेमो: http://jsfiddle.net/RVHzV/

प्रत्यक्ष परिणाम: http://jsfiddle.net/RVHzV/show/light/

इससे पहले JQuery के संस्करण

एक हाथ जोड़े अपने टैब कॉल करने के लिए ler टैब आईडी के साथ स्थान हैश अद्यतन करने के लिए:

$("#myTabs").tabs({ 
    // options ... 
    show: function(event, ui) { 
     window.location.hash = ui.panel.id; 
    } 
}); 

तुम भी करने के बाद अपने यूआई टैब्स बनाई गई हैं इस जोड़ सकते हैं:

$("#myTabs").bind("tabsshow", function(event, ui) { 
     window.location.hash = ui.panel.id; 
}); 

कोड डेमो: http://jsfiddle.net/jtbowden/ZsUBz/1/

नमूदार परिणाम: http://fiddle.jshell.net/jtbowden/ZsUBz/1/show/light/

Answer 3

मैं उपयोग करने के लिए "को सक्रिय" URL में दिखाने के लिए मेरी प्रारंभिक टैब पाने के लिए "बनाने" के बजाय था:

$('#tabs').tabs({ 
     create: function(event, ui) { 
      window.location.hash = ui.panel.attr('id'); 
     } 
    }); 

यह समाधान करने लगता है यूआरएल बदलने के लिए काम कर रहे हैं, लेकिन जब मैं यूआरएल पर वापस जाता हूं तो यह मेरे लिए टैब नहीं स्विच करता है। क्या मुझे उस यूआरएल पर हिट होने पर स्विच टैब बनाने के लिए कुछ खास करना है?

Answer 4

ऊपर जेफ बी के काम का निर्माण ... यह jQuery 1.11.1 के साथ काम करता है।

$("#tabs").tabs(); //initialize tabs 
$(function() { 
    $("#tabs").tabs({ 
     activate: function(event, ui) { 
      var scrollTop = $(window).scrollTop(); // save current scroll position 
      window.location.hash = ui.newPanel.attr('id'); // add hash to url 
      $(window).scrollTop(scrollTop); // keep scroll at current position 
    } 
}); 
}); 

Answer 5

अन्य उत्तरों के संयोजन ने मेरे लिए काम किया।

$("#tabs").tabs({ 
    create: function(event, ui) { 
     window.location.hash = ui.panel.attr('id'); 
    }, 
    activate: function(event, ui) { 
     window.location.hash = ui.newPanel.attr('id'); 
    } 
}); 

Answer 6

सबसे पहले, हम (इस नवीनतम jQueryUI के लिए है) टैब परिवर्तन पर हैश अद्यतन करने की आवश्यकता:

$('#tabs').tabs({ 
    beforeActivate: function (event, ui) { 
     window.location.hash = ui.newPanel.selector; 
    } 
});  

फिर हम हैश परिवर्तन पर सक्रिय टैब अद्यतन करने की आवश्यकता है (यानीब्राउज़र इतिहास/आगे बटन और उपयोगकर्ता टाइपिंग हैश में मैन्युअल रूप से सक्षम करने, वापस):

$(window).on('hashchange', function() { 
    if (!location.hash) { 
    $('#tabs').tabs('option', 'active', 0); 
    return; 
    } 
    $('#tabs > ul > li > a').each(function (index, a) { 
    if ($(a).attr('href') == location.hash) { 
     $('#tabs').tabs('option', 'active', index); 
    } 
    }); 
}); 

Answer 7

$("#tabs").tabs({    
     activate: function(event, ui) { 
      //Key => random string 
      //url => URL you want to set 
      window.history.pushState({key:'url'},'','url'); 
     } 
    }); 

Answer 8

मैं अपने jQuery उत्तरदायी टैब के भीतर इस विधि का इस्तेमाल किया सक्रिय टैब के साथ यूआरएल हैश करने के लिए।

$(function() { 
     $('#tabs, #subtabs').responsiveTabs({ 
      activate: function(event, ui) { 
      window.location.hash = $("ul li.r-tabs-state-active a").attr("href"); 
     }, 
     startCollapsed: 'accordion' 
     }); 
});