0

尝试将下拉菜单子页面链接到另一个页面上的选定选项卡。此处的下拉菜单：http ://arreolatran.com/clients/new_horizo​​ns/，尝试链接到此处选定的侧导航选项卡：http://arreolatran.com/clients/new_horizo​​ns/about- us.html。例如，转到关于我们下拉菜单 > 选择我们的专业知识（子页面） - 链接无效。它转到正确的页面，但没有选择正确的选项卡。下拉菜单导航代码：

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

1 回答 1

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

});

上述更改考虑到您需要能够：

  1. 从顶部/主导航以及侧面导航导航到内容部分（即我们的专业知识、为什么选择我们等）。
  2. 考虑链接的哈希部分，例如#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。

于 2013-02-28T22:54:37.423 回答