Javascript Hash/achor url需要显示隐藏的jquery/css div
这个问题让我发疯,尽管我确信答案就在眼前,因为我经常是个白痴 我根据这段代码制作了一个标签页,它同时使用CSS和jQuery。 选项卡式内容还需要通过CSS下拉菜单进行访问。你可以在这里看到。 这是我正在使用的代码Javascript Hash/achor url需要显示隐藏的jquery/css div,javascript,jquery,css,drop-down-menu,tabs,Javascript,Jquery,Css,Drop Down Menu,Tabs,这个问题让我发疯,尽管我确信答案就在眼前,因为我经常是个白痴 我根据这段代码制作了一个标签页,它同时使用CSS和jQuery。 选项卡式内容还需要通过CSS下拉菜单进行访问。你可以在这里看到。 这是我正在使用的代码 $('.subSection-tabs > li > a').click(function(event){ event.preventDefault();//stop browser to take action for clicked anchor //get d
$('.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将更改为Tab 2,但Tab 2 div和内容不会显示。从“显示选项卡2”选项卡更改它将按预期工作,并在浏览器窗口中放置相应的哈希选项卡2。我需要下拉导航的链接正常工作,以便用户可以使用后退按钮。你可以点击谷歌链接来了解我的意思
哦,天哪,我希望我解释得对。基本上,下拉菜单还需要显示和隐藏正确的div。我的脚本可以在/script.js上查看
非常感谢。我真的很感激任何帮助,因为我快发疯了。如果我能给你烤杯形蛋糕,我会的。我做了很棒的莫吉托。你可以假装吃它们
更新:我将show/hide类函数添加到我的Jsfiddle函数中,现在下拉列表显示了正确的div,但没有隐藏前面的div。我是如此接近,却又如此遥远 您使用的是history.pushState,它提供了tab2 但是看看提供的js,没有任何逻辑来显示div内容 像 另外,作为一个好的实践,将jquery和脚本放在正文的下面 这有两个目的,, 1.首先加载样式,这会更快地将页面呈现给用户 2.jquery脚本可以检查文档是否确实准备就绪并显示 看起来您的dropbox不喜欢运行jquery库,所以我建议以后使用github页面、codepen或JSFIDLE来演示js 添加了JSFIDLE:
似乎工作正常,但即使如此,这也不会显示历史记录。pushstate正在工作~发布您的代码!!!!!创建演示!!!!好的,瑞恩。谢谢,丹尼斯。我在JSFIDLE中添加了show/hide类函数,现在下拉列表显示了正确的div,但没有隐藏前面的div。我是如此接近,却又如此遥远!我感谢您在调用pushState函数以及建议在结束正文标记后放置脚本方面的帮助。我总是想知道为什么有些人会这样做。无论如何,这是我更新的JSFIDLE。
$("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~
});