jQuery यूआई टैब का उपयोग करना। एक टैब पैनल लोड करने के बजाय मैं एक टैब को URL से लिंक कैसे करूं?

Question

मैं किसी पृष्ठ के लंबवत टैब अनुभाग को बनाने के लिए jQuery UI टैब का उपयोग कर रहा हूं, और अंतिम लंबवत टैब को टैब पैनल लोड करने के बजाय किसी URL से लिंक करना चाहता हूं।

ऐसा करने के सर्वोत्तम तरीके के लिए कोई सुझाव? मैं सूची में एक एलआई के अलावा एक और तत्व छड़ी कर सकता हूं, लेकिन आखिरकार आखिरी ली सिर्फ अलग व्यवहार करेगी।

किसी भी मदद के लिए धन्यवाद।

यहाँ मेरी जावास्क्रिप्ट है:

// vtabs 
    $("#aboutprod-tabs").tabs(
    { fx: [{opacity:'toggle', duration:'normal'}, 
    {opacity:'toggle', duration:'fast'}] }) 
    .addClass('ui-tabs-vertical'); 

और एचटीएमएल

<div id="aboutprod-tabs"> 
    <ul> 
    <li><a href="#tabs-1">First</a></li> 
    <li><a href="#tabs-2">Second</a></li> 
    <li><a href="#tabs-3">3rd</a></li> 
    <li class="last"><a href="/products">Learn more...</a></li> 
    </ul> 
    <div id="tabs-1"> 
    Tab panel 1 
    </div> 
    <div id="tabs-2"> 
    Tab panel 2 
    </div> 
    <div id="tabs-3"> 
    Tab panel 3 
    </div> 
</div> 

Answer 1

के बाद अपने .tabs() फोन आप क्लिक व्यवहार और href पलट सकता है यह बदल गया है, href वापस इस तरह डाल:

$("li.last a").unbind('click').click(function() { 
    this.href = $.data(this, 'href.tabs');​​​​ 
}); 

You can give it a try here।

अद्यतन: का प्रयोग jQuery के नए संस्करण:

एक क्लिक हैंडलर जोड़ने के एक बार आप लिंक आप बदलना चाहते हैं से jQuery-यूआई का क्लिक हैंडलर निकल कोई जरूरत नहीं है। यह काम करेगा:

$("li.last a").unbind('click'); 

Answer 2

आप टैब की विधि का चयन बदल सकते हैं:

$(".selector").tabs({ select: function(event, ui) { ... } });

और की आईडी पर ui.tab.id (या ui.panel.id, मार्कअप प्रयोग कर रहे हैं के आधार पर) की तुलना टैब जिसे आप भेजना चाहते हैं, और उपयोगकर्ता को रीडायरेक्ट करने के लिए location.href=... का उपयोग करें।