链接到jQuery选项卡的特定选项卡 [英] Link to a specific tab for jquery tabs

问题描述

http://jsfiddle.net/78QPs/

这是Javascript

This is the Javascript

$(document).ready(function() {

$(".tab_content").hide();
$(".tab_content:first").show(); 

$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).attr("rel"); 
    $("#"+activeTab).fadeIn(); 
});

});

我已使用以上内容制作了标签页，但我想链接到tabs2&在上面的示例中，tab3来自另一个使用href的网页.除了使用Jquery UI(例如javascript)以外，还有其他方法吗?

I have used the above to make my tabs but I want to link to tabs2 & tab3 in my above example from another webpage using a href. Any other way other than using Jquery UI like javascript?

简而言之，如何直接从另一个页面以及上例中的页面内创建到选项卡的链接?

In short, How do I create a link to a tab directly from another page and within the page from the above example?

推荐答案

我想这是1)听取哈希值，以及2)触发相关标签"的点击.

I guess that is 1) Listen for the Hash, and 2) trigger the click of the relevant 'tab'.

现在我不是100％支持jquery对此事件侦听器的支持-但我将其添加.

Now Im not 100% on the support for this event listener from jquery - but I'll add it it.

   /* listen for the anchor hashtag change */
    $(window).on('hashchange', function() {
     /* trigger the click of the tab with the matching rel */
     var _rel =  document.location.hash.
      $("li[rel="+_rel.substring(1)+"]").click();
     });

---

或者使用本机的某种侦听器(我使用了它，但是如果可以解决的话，可能需要更新到上面的内容).

---

Or use this listener of sorts which is native, ( I use it but I might need to update to the above if it works out ).

var _currhash;

 function anchorWatch() {
  if(document.location.hash.length>0) {
    /* only run if 'hash' has changed */
     if(_currhash!==document.location.hash) {
       _currhash = document.location.hash;

          $("li[rel="+ _currhash.substring(1)+"]").click();

     }
   }
 } 
 setInterval(anchorWatch,300);

---

这是我在另一个q上添加的可能与之相关的演示和代码:- http://jsbin.com/soqopepe/1/edit

---

Here is a demo and code of something I added on another q that could be relevant : - http://jsbin.com/soqopepe/1/edit

*(不使用jquery标签)，但是以相同的方式工作*

*( not using jquery tabs), but works in the same way *

以下是您的代码的演示:

Here is a demo of your code with this added :

http://jsfiddle.net/sa2Lj/

要尝试，请 http://jsfiddle.net/sa2Lj/show/#tab3

这篇关于链接到jQuery选项卡的特定选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！