jquery选项卡从URL访问

您好我有jquery选项卡，并希望使用＃从URL访问它们但知道我怎么能完全填充它

要求是mywebsite.com/#show_page1将显示第1页内容，如果访问mywebsite.com/#show_page2将显示第2页内容

这是我的js代码

$(window).load(function(){ $(document).ready(function(){ $("#nav_tabbed a").click(function(){ var id = $(this).attr('id'); id = id.split('_'); $("#menu_container div").hide(); $("#menu_container #show_"+id[1]).fadeIn(); // remove classes from all $("a").removeAttr("style"); // add class to the one we clicked $(this).css("background-color","#1aaede"); // stop the page from jumping to the top return false; }); $("#menu_container #show_page1").show(); }); }); 

和html我有

 
 Page 1 Page 2 
 
 
  
 
  
  

Answer 1

location.hash; 将为您提供地址栏中添加的哈希值，您可以按照需要使用它。 我的建议在下面添加。

在我看来，您希望通过浏览器地址栏中的哈希以及您想要显示的相应div来高亮显示您的链接。 如果这是您想要实现的，那么您可以尝试使用标记和js中的轻微更改：

CSS：

 .active { color:red; } #menu_container div { display:none; } 

HTML：

 
 Page 1  Page 2 
 
 
Page 1
 
Page 2
  

JS：

 $(function () { // below works for hash added in the browser. var hash = location.hash; if(hash.length){ $('#nav_tabbed a').removeClass('active'); $('#menu_container div').hide(); $('#nav_tabbed a[href*="' + hash + '"]').addClass('active'); $('#menu_container div[id*="' + hash.slice(1) + '"]').show(); } $(document).scrollTop(0); // below works for click of the anchors $('#nav_tabbed a').click(function(e){ e.preventDefault(); $(this).addClass('active').siblings('a').removeClass('active'); $('#menu_container div').hide(); $('#menu_container div[id*="'+this.getAttribute('href').slice(1)+'"]').show(); }); }); 

一个样本小提琴。

Answer 2

你的post显示了一些关于这个主题的混乱。 所以首先要解释一下：url中有两个含义，＃是对位置散列的引用。 在jquery中，＃是对元素id的引用。

你想在这种情况下使用散列更改。

首先……你为什么要围绕dom.ready事件包装window.load？ 到目前为止，正如我所知，当dom准备就绪时，jquery的dom准备好了，jquerys window.load会在所有图像，iframe，插件等已经加载后触发。 所以在窗户里面有一个dom.ready是不必要的……

下一个：ID必须是唯一的 – 您不能为您的锚提供与指定div相同的ID！

让我们开始做生意 – html：

 
 Page 1 Page 2 
 
 
123
 
456
  

我们使用activeLink和activeTab类来确定当前打开的选项卡

css只设置activeLink的背景：

 .activeLink { background-color:#1aaede; } 

js：

 $(window).load(function(){ $(".contentTab:gt(0)").hide(); //on initial load, we hide all content tabs, despite the first one $("#nav_tabbed a").click(function () { //the click handler for the navigation only toggles the class to change the background color $(".activeLink").removeClass("activeLink"); $(this).addClass("activeLink"); }) if(location.hash) //here we check, if there already is a location hash set onload and then change to the desired tab { $(".activeTab").hide(); $(location.hash).show().addClass("activeTab"); } }); //our hashchange event handles the loading of the desired tabs: window.onhashchange = function () { if(location.hash!=null) //this checks, wether the hashchange event has been fired, due to a deletion of the hash via url { $(".activeTab").hide().removeClass("activeTab"); //hide the current tab $(location.hash).show().addClass("activeTab"); //show the clicked tab }else //and per default show the first tab { $(".activeTab").hide().removeClass("activeTab"); //hide the current tab $(".contentTab:first").show().addClass("activeTab"); //show the clicked tab } }; 

http://jsfiddle.net/ex46ndg1/3/