如何使用網址顯示隱藏的div

-1

我正在製作一個有3個部分的小頁面。雖然1節顯示其他人隱藏。顯示加載頁面時的歡迎頁面，而其他部分設置爲顯示：無。點擊其他頁面的菜單按鈕顯示所需的部分並隱藏所有其他頁面;我正在使用jQuery來做到這一點。不幸的是，現在我遇到了問題，我無法使URL轉到特定部分。通常，要轉到未隱藏頁面的一部分，我只需創建一個錨點並將其名稱爲XXX，然後在該頁面的網址末尾添加#XXX，但在隱藏的div上執行此操作不會使div秀。如何使用網址顯示隱藏的div

有什麼建議嗎？

HTML：

<div id="menu"> 
    <p><a href="#" id="menu-home">Home</a></p> 
    <p><a href="#" id="menu-page1">Page 1</a></p> 
    <p><a href="#" id="menu-page2">Page 2</a></p> 
</div> 

<div id="home"> 
    <h1>Welcome!</h1> 
    <p>This is where all the home page stuff will go</p> 
</div> 
<div id="page1"> 
    <h1>Page 1</h1> 
    <p>Page 1 content here</p> 
</div> 
<div id="page2"> 
    <h1>Page 2</h1> 
    <p>Page 2 content here</p> 
</div>

CSS：

#page1 { 
    display:none;  
} 
#page2 { 
    display:none; 
}

JS：

$(document).ready(function(){ 
    $('#menu-home).click(function(){ 
     $('#home').show('fast'); 
     $('#page1').hide('fast'); 
     $('#page2').hide('fast'); 
     }); 
    $('#menu-page1).click(function(){ 
     $('#page1').show('fast'); 
     $('#home').hide('fast'); 
     $('#page2').hide('fast'); 
     }); 
    $('#menu-page2).click(function(){ 
     $('#page2').show('fast'); 
     $('#home').hide('fast'); 
     $('#page1').hide('fast'); 
     }); 
});

來源

2015-02-08 kmobile

發佈您的代碼。 – user3781632 2015-02-08 16:02:17

給我們的jsfiddle鏈接你的代碼或粘貼代碼 – sailesh 2015-02-08 16:03:01

由於某種原因，我的jsfiddle將不使用的jQuery UI庫，以便顯示/隱藏功能不工作，但我已經張貼在上面 – kmobile 2015-02-08 16:24:07

你可以使用window.location.hash *將返回URL的相應部分。

對於這個工作，你應該給你的<a>標籤一些適當的哈希值：

<p><a href="#page1" id="menu-page1">Page 1</a></p> 
<p><a href="#page2" id="menu-page2">Page 2</a></p>

並檢查所提到的字符串是否指定頁面匹配：

$(document).ready(function(){ 
    //binding click events to elements 

    var locationHash = window.location.hash.substring(1); 
    if(locationHash == 'page1'){ 
     $('#menu-page1').trigger('click'); 
    }else if(locationHash == 'page2'){ 
     $('#menu-page2').trigger('click'); 
    } 
});

你看我用點擊事件爲一個快速的N-dirty解決方案，並且還包含location.hash以擺脫#。
當然這是可以改進的。如果找到給定的散列，則在頁面加載時根本不隱藏頁面1或頁面2。

*請參閱鏈接的文檔Location爲window.location的是Location對象，持有物業hash

來源

2015-02-08 16:43:13 yoshi

大答案，這真的有很大幫助。由於某種原因，它會觸發點擊並在實際頁面中間啓動頁面，但這沒什麼大不了的。稍微修補一下，我確信我會弄清楚。謝謝！ – kmobile 2015-02-08 18:26:07

您將需要一些JavaScript，即，在頁面加載，檢查像#menu-xy錨網址，使相應的div可見。

來源

2015-02-08 16:47:30 Ridcully

如何使用網址顯示隱藏的div

回答

相關問題