Question

这是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＆amp;我上面的例子中的tab3来自另一个使用href的网页。除了使用像javascript这样的Jquery UI之外的其他任何方式吗？

简而言之，如何直接从其他页面和上面示例的页面中创建指向选项卡的链接？

Answer 1

我想这是1）听取哈希，2）触发相关“标签”的点击。

现在我不是100％支持来自jquery的这个事件监听器 - 但是我将它添加它。

   /* 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();
     });

或者使用本机的各种类型的侦听器（我使用它但是如果它运行的话我可能需要更新到上面的那个）。

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

*（不使用jquery选项卡），但工作方式相同*

以下是您的代码演示：

http://jsfiddle.net/sa2Lj/

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

Answer 2

您有多种选择：在您的网址中使用哈希来引用您的标签的ID，并使用window.location.hash检索它。

所以，让我们假设你有一个标签，其中包含id =＆＃39; tab＆＃39;和window.location.hash =＆＃39; tab＆＃39;，你可以做$（window.location.hash）.hide（）。

另一个不错的选择是使用HTML5历史记录功能相应地更改所选标签的URL。我想这也会更好。

Answer 3

对于大多数跨浏览器兼容的解决方案，例如：

var queryString = {};
window.location.href.replace(
new RegExp("([^?=&]+)(=([^&]*))?", "g"),
function($0, $1, $2, $3) { queryString[$1] = $3; }
);

if (queryString[base.options.param]) {

var tab = $("a[href='#" + queryString[base.options.param] + "']");

tab
    .closest(".tab_content")
    .find("a")
    .removeClass("active")
    .end()
    .next(".list-wrap")
    .find("ul")
    .hide();
tab.addClass("current");
$("#" + queryString[base.options.param]).show();

};

这会为每个标签指定一个查询字符串参数值。

链接到jquery选项卡的特定选项卡

3 个答案: