哈希/ achor url需要顯示隱藏的jquery/css div

這個問題一直讓我瘋狂，雖然我確定答案是在我臉上凝視，因爲我經常是一個白癡。哈希/ achor url需要顯示隱藏的jquery/css div

我做了一個基於此代碼的選項卡式頁面，它使用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'); 
});

所以當下拉鍊接，用戶點擊，然後選擇「選項卡2」，在瀏覽器的網址更改爲＃TAB2，但拉環2格和內容不會顯示。將其從「顯示選項卡2」選項卡中更改爲按預期方式工作，並在瀏覽器窗口中放置適當的散列（＃tab2）。我需要下拉導航的鏈接才能正常工作，以便用戶可以使用後退按鈕。您可以點擊Google鏈接查看我的意思。

噢，天啊，我希望我正確地解釋這個。基本上，下拉菜單還需要顯示和隱藏正確的div。我的腳本可以在/script.js查看

非常感謝。我非常感謝任何幫助，因爲我瘋了。如果我可以烤蛋糕，我會。我製作了令人敬畏的mojito。你可以假裝吃掉它們。

更新：我添加了顯示/隱藏類功能到我的Jsfiddle的功能（e），現在下拉顯示正確的div但不隱藏以前。我很近，但迄今爲止！

來源

2014-02-25 christine

張貼您的代碼!!!!!創建[jsfiddle]（http://fiddle.jshell.net/）演示！ – rynhe

好的，rynhe。 http://jsfiddle.net/4N63A/ – christine

您使用，讓你的＃TAB2 但看着提供的JS的history.pushState，沒有任何邏輯來顯示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/

似乎工作正常，但即使如此，這並不顯示history.push狀態工作〜

來源

2014-02-25 10:28:59

謝謝，丹尼斯。我將show/hide類功能添加到了我的Jsfiddle，現在下拉菜單顯示正確的div，但不隱藏前一個。我很近，但迄今爲止！感謝您的幫助，以便調出pushState函數並建議將腳本放在關閉body標籤之後。我總是想知道爲什麼有些人這樣做。無論如何，這是我更新的Jsfiddle。 http://jsfiddle.net/boobunny/4N63A/2/ – christine

哈希/ achor url需要顯示隱藏的jquery/css div

回答

相關問題