jquery - jQuery 菜单正在切换下面的块 + 链接到活动块

Question

所以我做了一个简单的菜单，它在下面切换一个块，没关系 - 这是我的JS Fiddle。但我需要能够从外部链接到这些块。

很难用文字来描述，所以我举了一个例子—— 你会在那里找到一个菜单，你会在“Fetures”菜单项上，这里是第二个菜单项的链接——“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 与哈希匹配的 div。

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();
});