javascript - JQueryでアンカータグを使用して別のページから特定のタブを選択します

Question

ドロップダウンメニューのサブページを別のページの選択したタブにリンクしようとしています。ここのドロップダウンメニュー: http://arreolatran.com/clients/new_horizo ns/ 、ここで選択した sidenav タブへのリンクを試みます: http://arreolatran.com/clients/new_horizo ns/about-us.html 。たとえば、[About Us] ドロップダウンメニューに移動し、[Our Expertise (サブページ)] を選択します - リンクは機能しません。正しいページに移動しますが、正しいタブが選択されません。ドロップダウンメニューのナビゲーションコード:

<div id="nav">
    <a href="index.html"><div class="nhImgs logo"></div></a>
    <ul id="pages">
        <li>
            <a href="about-us.html">About Us<div class="nhImgs caret"></div></a>
            <ul>
                <li><a href="about-us.html#ourExpertise">Our Expertise</a></li>
                <li><a href="about-us.html#whyChooseUs">Why Choose Us?</a></li>
                <li><a href="about-us.html#tammy">Dr. Tammy Mondry</a></li>
                <li><a href="about-us.html#joe">Dr. Joe Mondry</a></li>
            </ul>
        </li>
        <li>
            <a href="lymphedema.html">Lymphedema<div class="nhImgs caret"></div></a>
            <ul>
                <li><a href="lymphedema.html#idLymph">Identifying Lymphedema</a></li>
                <li><a href="lymphedema.html#examplesLymph">Examples of Lymphedema</a></li>
                <li><a href="lymphedema.html#lymphTreat">Lymphedema Treatment</a></li>
                <li><a href="lymphedema.html#lymphFaqs">Lymphedema FAQs</a></li>
                <li><a href="lymphedema.html#lymphProd">Products</a></li>
            </ul>
        </li>
        <li>
            <a href="cancer-rehabilitation.html">Cancer Rehabilitation<div class="nhImgs caret"></div></a>
            <ul>
                <li><a href="cancer-rehabilitation.html#benefitsExe">Benefits of Exercise</a></li>
                <li><a href="cancer-rehabilitation.html#assessTest">Assessment and Testing</a></li>
                <li><a href="cancer-rehabilitation.html#programSpec">Program Specifics</a></li>
                <li><a href="cancer-rehabilitation.html#cancerExeFaqs">Cancer &amp; Exercise FAQs</a></li>
            </ul>
        </li>
        <li>
            <a href="patient-guide.html">Patient Guide<div class="nhImgs caret"></div></a>
            <ul>
                <li><a href="patient-guide.html#publications">Publications</a></li>
                <li><a href="patient-guide.html#downloadsForms">Downloads/Forms</a></li>
                <li><a href="patient-guide.html#relatedInfo">Related Information</a></li>
            </ul>
        </li>
        <li>
            <a href="contact-us.html">Contact Us</a>
        </li>
    </ul>
</div>

Sidenav タブコード:

<div class="sideNavCont">
    <div id="sidenav">
        <ul class="colL">
          <li class="sidenavHdrText"><a href="#about1">About Us</a></li>
          <li><a href="#expertise2">Our Expertise</a></li>
          <li><a href="#why3">Why Choose Us?</a></li>
          <li><a href="#tammy4">Dr. Tammy Mondry</a></li>
          <li><a href="#joe5">Dr. Joe Mondry</a></li>
        </ul>

        <div id="about1" class="sideNavColR">
          <ul>
            <h1 id="aboutUs" class="pageTtl">About Us</h1>
              <p>Content here.</p>
        </div>

        <div id="expertise2" class="sideNavColR">
          <ul>
                <h1 id="ourExpertise">Our Expertise</h1>
              <p>Content here.</p>
          </ul>    
        </div>

        <div id="why3" class="sideNavColR">
          <ul>
              <h1 id="whyChooseUs">Why Choose Us</h1>
              <p>Content here.</p>
            </ul>    
        </div>

        <div id="tammy4" class="sideNavColR">
          <ul>
              <h1 id="tammy">Dr. Tammy Mondry</h1>
              <p>Content here.</p>
          </ul>    
        </div>

        <div id="joe5" class="sideNavColR">
          <ul>
              <h1 id="joe">Dr. Joe Mondry</h1>
              <p>Content here.</p>
          </ul>    
        </div>
    </div>
</div>

sidenav タブの JS:

// JavaScript Document
$(function () {
    $('#sidenav div').hide();
    $('#sidenav div:first').show();
    $('#sidenav ul li:first').addClass('active');
    $('#sidenav ul li a').click(function () {
        var currentTab = $(this).attr('href');
        var vis = $(currentTab).is(':visible');
        $('#sidenav div').hide();
        $('#sidenav ul li').removeClass('active');
        $(this).parent().addClass('active');
        if (vis) {
            $(currentTab).hide();
        } else {
            $(currentTab).show();
        }
    });
});

score 1 · Accepted Answer

近かったと思いますが、修正が必要なことがいくつかありました。次のいずれかを試す前に、現在のファイルのバックアップを作成してください。

サイドバーのナビゲーションに次の JS を試してください。

// JavaScript Document
$(document).ready(function() {
    $('#sidenav div').hide();
    $('#sidenav div:first').show();
    $('#sidenav ul li:first').addClass('active');

    function handleNavSwitch(linkObj) {
    var currentTab = $(linkObj).attr('href');
    if (currentTab.substr(0, 1) != '#') return;

        var vis = $(currentTab).is(':visible');
    if (!vis) {
            $('#sidenav div').hide();
            $('#sidenav ul li').removeClass('active');
            //$(linkObj).parent().addClass('active');
        var hashTag = currentTab.substr(1);
        $('#sidenav ul li a[href="#'+hashTag + '"]').parent().addClass('active');
        $(currentTab).show();
        }  
    }

    $('#nav ul li a, #sidenav ul li a').click(function() { handleNavSwitch(this); });
    // Check if hash exists
    if(window.location.hash) {
    // Retrieve hash value (not including the "#")
    var hashTag = window.location.hash.substr(1);
    // Make sure that there's an actual value for the hash
    if (hashTag.length > 0) {
        // Find the link with the matching 
        var $link = $('#sidenav ul li a[href="#'+hashTag + '"]');

        //if ($link.length > 0) handleNavSwitch( $link.get(0) );
        if ($link.length > 0) $link.trigger('click');
    }
    }

});

上記の変更は、次のことができる必要があることを考慮に入れています。

トップ/メインナビゲーションとサイドナビゲーションの両方から、コンテンツセクション (当社の専門知識、当社を選ぶ理由など) に移動します。
#ourExpertise、#whyChooseUs など、リンクのハッシュ部分を考慮してください。

また、リンクの一貫性の問題にも対処する必要があります。たとえば、会社概要リンクでは、#ourExpertise、#whyChooseUs、#tammy、#joe を使用します。次に、サイドバーコードに #expertise2、#why3、#tammy4、および #joe5 があります。これらの名前はどちらも同じにする必要があります...そのため、#expertise2 への参照を #ourExpertise などに変更します。

最後に、これを実装した方法のために、それぞれのページのヘッダーメニューリンクも調整する必要があるでしょう。たとえば、提供された例では「about-us.html#ourExpertise」がありますが、上記の変更を機能させるには、URL から「about-us.html」を削除して「#ourExpertise」にする必要があります。 ... これは about-us.html ページにのみ適用されます。Lymphedema.html ページでは、lymphedema.html#idLymph の代わりに #idLymph が表示されるように、メニューリンクなどから Lymphedema.html を削除する必要があります。

javascript - JQueryでアンカータグを使用して別のページから特定のタブを選択します

1 に答える 1

Related

Reference