Question

我有一个子导航器（使用下面的代码）在单击适当的链接时切换/关闭div。它完美无缺。唯一的问题是，现在我需要使用散列（pageName.php＃div4）链接到此页面并打开id为div4的div，而且我没有太多运气。

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

Sub Nav 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();

Answer 1

现在我需要链接到这个页面并打开 - 说 - 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();

Answer 2

检查页面加载事件的hash component of the URL。从那里，根据需要做出回应。

像

这样的东西

$(function()
{
    if(window.location.hash)
    {
        $("#" + window.location.hash).click();
    }
});

从页外链接显示div

2 个答案: