2

私が開発している Web サイトには、すべてのページのフッターにリンクのリストがあります。これらのリンクには、次のようなアンカーが追加されます。

<ul>
    <li class="lines exp"><a href="services.html#sa">Service A</a></li>
    <li class="lines exp"><a href="services.html#sb">Service B</a></li>
    <li class="lines exp"><a href="services.html#sc">Service C</a></li>
</ul>

これらのリンクの「services.html」ターゲット ページには、次のように、上記のアンカー リンクにそれぞれ対応する一連のトグル スタイルの div があります。

<div id="sa" class="toggle-trigger">
    <h3 class="services-title">
        <a class="toggle-text">Service A</a>
    </h3>
</div>
<div class="toggle-container">
    <p>Lorem ipsum sit dolorem.</p>
</div>
<div id="sb" class="toggle-trigger">
    <h3 class="services-title">
        <a class="toggle-text">Service B</a>
    </h3>
</div>
<div class="toggle-container">
    <p>Lorem ipsum sit dolorem.</p>
</div>
<div id="sc" class="toggle-trigger">
    <h3 class="services-title">
        <a class="toggle-text">Service C</a>
    </h3>
</div>
<div class="toggle-container">
    <p>Lorem ipsum sit dolorem.</p>
</div>

最終的な目標は、シミュレートされたクリック イベントでフッター リンクがターゲットの「toggle-trigger」div をアクティブにすることです。これにより、「services.html」ページの読み込み後に、関連付けられた「toggle-container」div がトグルで開きます。

この目的のために、本文の最後にある「services.html」に次の JavaScript / jQuery を追加しました。

<script type="text/javascript">
    $( document ).ready(function() {
        var target = document.URL;
        var regex = /services\.html#[a-z]{2}$/;
        var result = regex.exec(target);
        console.log("Target / Regex / Result: " + target + " / " + regex + " / " + result);
        if (result) {
            var divID = /#[a-z]{2}/.exec(result);
            console.log("divID: " + divID[0]);
            $(divID[0]).delay(1000).trigger('click');
        }
    });
    $(".exp").click(function() {
        var target = window.location.hash;
        console.log("Target: " + target);
        $(target).delay(1000).trigger('click');
    });
</script>

result同じページ内の固定リンクをクリックすると、最初の関数の変数が常に null になるため、2 番目の関数を追加しました。

現在、これは、他のサイト ページのフッター リンクをクリックしたときに、私が望んでいたとおりに機能します。ただし、既に「services.html」ページにいて、同じページのフッター リンクの 1 つをクリックすると、最初にクリックしたときに機能しませんが、アンカー リンクが 2 回目にクリックされたときに機能します。

もちろん、フッター リンクがクリックされたページに関係なく、望ましい動作は同じように機能することです。

私は何を間違っていますか？

4

1 に答える 1

0

私の見方では...すでにservices.htmlページにいるとき、何かがうまく動作しません。これは、href="services.html#sa" の可能性があります。何が問題なのか正確にはわかりませんが、「#anchor」を別の方法で取得することをお勧めします。

何かのようなもの

$(".exp").click(function(){
  $a = $(this).find("a").first() ;
  href = $a.attr('href') ;
  // parse the href to retrieve #anchor
}) ;

このようにすれば、window.location... に依存しなくなります。これは、既に services.html を使用しているときに動作が悪くなる可能性があります。

于 2013-09-19T20:16:27.060 に答える