从页外链接显示 div答案

【问题标题】：Showing a div from an off-page link从页外链接显示 div
【发布时间】：2013-02-12 03:51:14
【问题描述】：

我有一个子导航（使用下面的代码），当点击相应的链接时，它会关闭/打开 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();

【问题讨论】：

标签： jquery html show-hide

【解决方案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();

【讨论】：

谢谢 Undefined，我想我可能没有很好地解释自己。我希望 sub nav 显示/隐藏功能保持原样，但允许 /page.php#div4 之类的链接隐藏除 id="div4" 的 div 之外的所有内容。我已将 div 代码添加到原始问题中。
@rrfive 不客气，好的，所以请更新您问题中的div #4 部分。

【解决方案2】：

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

类似

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

【讨论】：