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，但选项卡 2 div 和内容不显示。从“显示选项卡 2”选项卡更改它按预期工作，并将适当的哈希 (#tab2) 放在浏览器窗口中。我需要下拉导航的链接正常工作，以便用户可以使用后退按钮。您可以点击 Google 链接了解我的意思。

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

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

更新：我将显示/隐藏类函数添加到我的 Jsfiddle 的函数（e）中，现在下拉显示正确的 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 pages、codepen 或 jsfiddle 来演示 js 的东西

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

似乎工作正常，但即便如此，这并没有显示 history.pushstate 工作~