jQuery菜單是切換下面的塊+鏈接到活動塊

Question

因此，我做了一個簡單的菜單，切換下面的塊，那好 - 這是我的JS Fiddle。 但我需要能夠從外部鏈接到這些塊。

很難用文字來形容，所以我舉一個例子 - You will find a menu there and you will be on a "Fetures" menu item這裏是link on a second menu item - "Demo"。

這裏是我的代碼：

<div class="wrap"> 
    <ul> 
     <li><a id="linkOne" href="#/first">First</a></li> 
     <li><a id="linkTwo" href="#/second">Second</a></li> 
     <li><a id="linkThree" href="#/third">Third</a></li> 
    </ul> 
    <p id="first">First Paragraph</p> 
    <p id="second">Second Paragraph</p> 
    <p id="third">Third Paragraph</p> 

和JS：

$(document).ready(function(){ 
    $('#linkOne').click(function(){ 
     $('#first').show(); 
     $('#second').hide(); 
     $('#third').hide(); 
    }); 
    $('#linkTwo').click(function(){ 
     $('#first').hide(); 
     $('#second').show(); 
     $('#third').hide(); 
    }); 
    $('#linkThree').click(function(){ 
     $('#first').hide(); 
     $('#second').hide(); 
     $('#third').show(); 
    }); 
}); 

我沒有找到任何教程或很好的例子，因此，如果您知道的請把我的線。

Answer 1

這會得到散列（＃）並查找與散列相匹配的ID。

if(window.location.hash){ 
    var whichDiv = window.location.hash; 
    $(whichDiv).show(); 
} 

你需要讓哈希段落的ID匹配編輯這些（刪除/）：

<li><a id="linkOne" href="#first">First</a></li> 
<li><a id="linkTwo" href="#second">Second</a></li> 
<li><a id="linkThree" href="#third">Third</a></li> 

Answer 2

我主張使用點擊，而不是表演，而是同主意：

$(document).ready(function(){ 

$('#linkOne').click(function(){ 
    $('#first').show(); 
    $('#second').hide(); 
    $('#third').hide(); 
}); 
$('#linkTwo').click(function(){ 
    $('#first').hide(); 
    $('#second').show(); 
    $('#third').hide(); 
}); 
    $('#linkThree').click(function(){ 
    $('#first').hide(); 
    $('#second').hide(); 
    $('#third').show(); 
}); 

if(location.hash) $(location.hash).click(); 
});