jQuery:选项卡/内容可以链接到的选项卡 [英] jQuery: tabs where the tab/content can be linked to

问题描述

我的问题很简单.

我已经实现了制表系统，并且可能花更多的时间用我需要的解决方案来实现另一个系统，而不是花精力修改我拥有的代码，并在询问时学到一些东西:)

I have already implemented a tab system, and I'd probably spend more time implementing another one with the solution I need, than giving a shot at adapting the code I have, and learn something while asking :)

我的问题是选项卡无法链接，我需要能够链接到另一个网站或页面的选项卡，并在页面加载时选择该选项卡.

My problem is that the tabs can't be linked to, I need to be able to link to a tab from another website or page, and have that tab get selected upon page load.

ie:我有三个选项卡显示不同的产品，默认情况下，页面加载时，选项卡1是活动的/已选中.我想从主页链接到选项卡2，但是由于未选中它而无法链接到选项卡2.不确定是否有意义.

ie: I have three tabs showing different products, by default tab 1 is active/selected when the page loads. From the home page I want to link to tab 2 but I can't link to tab 2 because it doesn't get selected. Not sure if that makes sense.

标签:

 <ul>
  <li><a href="#tab1">Product 1</a></li>
  <li><a href="#tab2">Product 2</a></li>
  <li><a href="#tab3">Product 3</a></li> 
 </ul>

 <div class="tab_container">
  <div id="tab1" class="tab_content">Product 1 info...</div>
  <div id="tab2" class="tab_content">Product 2 info...</div>
  <div id="tab3" class="tab_content">Product 3 info...</div>
 </div>

我的jQuery:

$(document).ready(function() {

//Default Action
$(".tab_content").hide(); 
$("ul.tabs li:first").addClass("active").show(); 
$(".tab_content:first").show(); 

//On Click Event
$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); 
    $(this).addClass("active"); 
    $(".tab_content").hide(); 
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn(); 
    return false;
  });

});

有没有一种方法可以修改此代码，以使其能够从任何地方链接到任何选项卡，并在页面加载时选择该选项卡?

Is there a way this code can be adapted to be able to link to any tab from anywhere and have that tab get selected when the page loads?

谢谢.

推荐答案

您的标签页将更像这样使用:

Your tabs would be more usable like this:

 <ul>
  <li><a href="#tab1">Product 1</a></li>
  <li><a href="#tab2">Product 2</a></li>
  <li><a href="#tab3">Product 3</a></li> 
 </ul>

 <div class="tab_container">
  <div id="tab1" class="tab_content">Product 1 info...</div>
  <div id="tab2" class="tab_content">Product 2 info...</div>
  <div id="tab3" class="tab_content">Product 3 info...</div>
 </div>

这样您现在就可以在浏览器的URL中查找哈希(例如，使用location.pathname提取URL哈希并使用$ .tabs().select([id]或[index])设置标签).

So that you are now able to look for a hash in the URL of the browser (e.g. use location.pathname to extract the URL hash and use the $.tabs().select([id] or [index]) to set the tab).

例如

$(function(){
   $('tabs').tabs();
   var hash = location.hash;
   $('tabs').tabs( "select" , hash );
});

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