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 に答える