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

jQuery菜单，它切换下面的块+链接到活动块

2 个答案: