1

我有一个子导航（使用下面的代码）在单击适当的链接时关闭/打开 div。它工作完美。唯一的事情是，现在我需要使用哈希 (pageName.php#div4) 链接到此页面并打开 id 为 div4 的 div，但我运气不佳。

关于我如何实现这一目标的任何想法？

子导航 HTML：

<div class="subnav">
    <a href="javascript:;" data-target="1" class="showDiv active">Link</a>
    <a href="javascript:;" data-target="2" class="showDiv">Link</a>
    <a href="javascript:;" data-target="3" class="showDiv">Link</a>
    <a href="javascript:;" data-target="4" class="showDiv">Link</a>
</div>

内容 HTML：

<div id="div1" class="targetDiv">Content</div>
<div id="div2" class="targetDiv">Content</div>
<div id="div3" class="targetDiv">Content</div>
<div id="div4" class="targetDiv">Content</div>

JavaScript：

$('.showDiv').on('click', function () {
    $(this).addClass('active').siblings().removeClass('active');
    $('.targetDiv').fadeOut("fast").delay(200);
    $('#div' + $(this).data('target')).fadeIn("slow");
});

$('.showDiv').first().click();
4

2 回答 2

0

现在我需要链接到这个页面并打开 - 比如说 - div #4

如果要选择 ID 为的元素，4可以编写代码：

$('div#' + $(this).data('target'))

或者因为 ID 是唯一的：

$('#' + $(this).data('target'))

编辑：

var $divs = $('div.targetDiv');
$('.showDiv').on('click', function() {
    var $this = $(this);
    // return if the clicked element has active class 
    if ($this.hasClass('active')) return;
    $this.addClass('active').siblings().removeClass('active');
    $divs.fadeOut("fast", function() {
       $divs.filter('#div' + $this.data('target')).delay(200).fadeIn("slow");
    })
}).first().click();
于 2013-02-12T03:58:30.673 回答
0

检查页面加载事件中 URL 的哈希组件。从那里，根据需要做出响应。

就像是

$(function()
{
    if(window.location.hash)
    {
        $("#" + window.location.hash).click();
    }
});
于 2013-02-12T04:49:49.150 回答