Hash/achor url需要显示隐藏的jquery/css-div

Question

这个问题一直让我抓狂，尽管我确信答案就在眼前，因为我经常是个白痴。

我根据这段代码制作了一个标签页，它同时使用CSS和jQuery。http://www.mkyong.com/jquery/how-to-use-css-and-jquery-to-hide-and-show-tab-content/

选项卡式内容还需要通过下拉式CSS菜单进行访问。你可以在这里看到。http://jsfiddle.net/4N63A/

这是我正在使用的代码。

$('.subSection-tabs > li > a').click(function(event){
event.preventDefault();//stop browser to take action for clicked anchor
//get displaying tab content jQuery selector
var active_tab_selector = $('.subSection-tabs > li.selected > a').attr('href');                 
//find actived navigation and remove 'selected' css
var actived_nav = $('.subSection-tabs > li.selected');
actived_nav.removeClass('selected');
//add 'selected' css into clicked navigation
$(this).parents('li').addClass('selected');
//hide displaying tab content
$(active_tab_selector).removeClass('selected');
$(active_tab_selector).addClass('hide');
//show target tab content
var target_tab_selector = $(this).attr('href');
$(target_tab_selector).removeClass('hide');
$(target_tab_selector).addClass('selected');
});
//checks for hash tag in URL to display correct div 
var hash = $.trim( window.location.hash );
if (hash) $('.subSection-tabs > li > a[href$="'+hash+'"]').trigger('click');
//force browser URL to update with the selected hash tag
$("a[href^=#]").on("click", function(e) {
e.preventDefault();
history.pushState({}, "", this.href);
//show/hide div from drop down
var active_nav_selector = $('ul > li.navHash > a').attr('href');
$(active_nav_selector).removeClass('selected');
$(active_nav_selector).addClass('hide');
var target_nav_selector = $(this).attr('href');
$(target_nav_selector).removeClass('hide');
$(target_nav_selector).addClass('selected');
});

因此，当用户单击下拉链接，然后单击"Tab 2"时，浏览器中的url将更改为#tab2，但Tab 2div和内容不会显示。将其从"显示选项卡2"选项卡更改为预期效果，并在浏览器窗口中放入适当的哈希(#tab2)。我需要下拉导航的链接才能正常工作，这样用户就可以使用后退按钮。你可以点击谷歌链接来了解我的意思。

天啊，我希望我能正确地解释这一点。基本上，下拉菜单还需要显示和隐藏正确的div。我的脚本可以在/script.js 上查看

提前非常感谢。我真的很感激任何帮助，因为我快疯了。如果我能给你烤纸杯蛋糕，我会的。我做了很棒的莫吉托。你可以假装吃它们。

UPDATE：我在Jsfidle的函数(e)中添加了show/hide类函数，现在下拉菜单显示了正确的div，但没有隐藏以前的div。我离得很近，但离得很远！

Answer 1

您使用的是history.pushState，它为您提供了#tab2但是从提供的js来看，没有任何逻辑来显示div内容像

$("a[href^=#]").on("click", function(e) {
e.preventDefault();
history.pushState({}, "", this.href);
// show the tab content with the same name (use id since they're the same) as href~    
});

同样，作为一种好的做法，将jquery和脚本放在正文下面(这有两个目的，1.样式先加载，更快地将页面呈现给用户2.您的jquery脚本可以检查"文档"是否确实准备好并显示

(看起来你的dropbox不喜欢运行jquery库)-所以我建议你将来使用github页面、codepen或jsfiddle来演示js

添加了JSFIDDLE：http://jsfiddle.net/denistsoi/UD4Hx/

看起来工作得很好，但即使这样，这也没有显示历史。pushstate正在工作~