使用JQuery中的定位标记从另一个页面中选择特定标签

Question

Trying to link dropdown menu subpages to selected tab on another page. Dropdown menu here: http://arreolatran.com/clients/new_horizons/ , trying to link to selected sidenav tabs here: http://arreolatran.com/clients/new_horizons/about-us.html . For example, go to About Us dropdown menu > select Our Expertise (subpage) - link does not work. It goes to the correct page, but does not select the correct tab. Dropdown menu nav code:

<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 tab code:

<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>

JS for sidenav tabs:

// 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();
        }
    });
});

Answer 1

I think you were close, but there were a couple of things that need to be modified. Make a backup of your current files before trying any of the following.

Try the following JS for your sidebar navigation:

// 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');
    }
    }

});

The above changes take into account that you need to be able to:

1. Navigate to the content sections (ie our expertise, why choose us, etc.) from both the top/main navigation, as well as from the side navigation.
2. Take the hash part of the link into consideration, eg #ourExpertise, #whyChooseUs.

You'll also need to address some consistency issues in your links. For example, in your about us links you use #ourExpertise, #whyChooseUs, #tammy, and #joe. Then in your sidebar code you have #expertise2, #why3, #tammy4, and #joe5. These names should both be the same... so change references to #expertise2 to #ourExpertise, etc.

Finally, because of the way you have implemented this, you will probably also have to adjust the header menu links on each of your respective pages. For example, in the provided example you have "about-us.html#ourExpertise" - however, for the above changes to work you need to remove "about-us.html" from the URL so that it is just "#ourExpertise"... this ONLY applies to the about-us.html page. On the lymphedema.html page you'd need to remove lymphedema.html from the menu links, etc. so that you would have #idLymph instead of lymphedema.html#idLymph.