Question

尝试将下拉菜单子页面链接到另一页面上的选定标签。此处的下拉菜单：http://arreolatran.com/clients/new_horizons/，尝试链接到此处的所选sidenav标签：http://arreolatran.com/clients/new_horizons/about-us.html。例如，转到关于我们下拉菜单＆gt;选择我们的专业知识（子页面） - 链接不起作用。它会转到正确的页面，但不会选择正确的选项卡。下拉菜单导航代码：

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

Answer 1

我认为你很接近，但有一些事情需要修改。在尝试以下任何操作之前，请备份当前文件。

尝试使用以下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而不是lymphedema.html＃idLymph。

使用JQuery中的锚标记从另一个页面中选择特定选项卡

1 个答案: