悬停时，WordPress在引导导航上更改活动类

Question

我正在使用Wordpress建立一个网站。 大多数导航菜单链接都链接到主页上的ID。 因此，当我加载网站时，链接到首页上某个地方的所有链接均处于活动状态。 我在Wordpress中删除了脚本，以检查脚本是否处于活动状态。 我想我可以使用bootstrap scrollspy来完成此操作，甚至可以完成JSFiddle https://jsfiddle.net/cse_tushar/Dxtyu/141/

我遇到的问题是，因为导航被Wordpress吐出，所以我没有能力将硬代码“活动”到第一个li元素，而实际上却对其进行硬编码，然后执行添加类和删除类。 我将如何更改上述JSFiddle，以实现哈希目标。 因此，每当我滚动并击中与导航项具有相同ID的div时，它都会触发活动的类并保持活动状态，直到我击中另一个或更改页面。 这是我的导航在wordpress上的样子。

<nav class="collapse navbar-collapse" role="navigation">
        <ul id="menu-primary-navigation" class="nav navbar-nav">
            <li class="current-menu-item current_page_item menu-about"><a href="/#about">About</a></li>
            <li class="current-menu-item current_page_item menu-team"><a href="/#team">Team</a></li>
            <li class="current-menu-item current_page_item menu-services"><a href="/#services">Services</a></li>
            <li class="menu-services"><a href="/blog">Blog</a></li>
            <li class="current-menu-item current_page_item menu-contact-us"><a href="/#contact">Contact Us</a></li>
        </ul>      
</nav>  

<div id="about">
    Something Here
</div>

<div id="team">
    Something Here
</div>

Answer 1

您可以通过在页面加载开始时添加以下行来完成此操作：

$("ul li a:first").addClass('active');

 $(document).ready(function () { $(document).on("scroll", onScroll); $("ul li a:first").addClass('active'); //smoothscroll $('a[href^="#"]').on('click', function (e) { e.preventDefault(); $(document).off("scroll"); $('a').each(function () { $(this).removeClass('active'); }) $(this).addClass('active'); var target = this.hash, menu = target; $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top+2 }, 500, 'swing', function () { window.location.hash = target; $(document).on("scroll", onScroll); }); }); }); function onScroll(event){ var scrollPos = $(document).scrollTop(); $('#menu-center a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { $('#menu-center ul li a').removeClass("active"); currLink.addClass("active"); } else{ currLink.removeClass("active"); } }); } 

 body, html { margin: 0; padding: 0; height: 100%; width: 100%; } .menu { width: 100%; height: 75px; background-color: rgba(0, 0, 0, 1); position: fixed; background-color:rgba(4, 180, 49, 0.6); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .light-menu { width: 100%; height: 75px; background-color: rgba(255, 255, 255, 1); position: fixed; background-color:rgba(4, 180, 49, 0.6); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #menu-center { width: 980px; height: 75px; margin: 0 auto; } #menu-center ul { margin: 15px 0 0 0; } #menu-center ul li { list-style: none; margin: 0 30px 0 0; display: inline; } .active { font-family:'Droid Sans', serif; font-size: 14px; color: #fff; text-decoration: none; line-height: 50px; } a { font-family:'Droid Sans', serif; font-size: 14px; color: black; text-decoration: none; line-height: 50px; } #home { background-color: grey; height: 100%; width: 100%; overflow: hidden; background-image: url(images/home-bg2.png); } #portfolio { background-image: url(images/portfolio-bg.png); height: 100%; width: 100%; } #about { background-color: blue; height: 100%; width: 100%; } #contact { background-color: red; height: 100%; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <div class="m1 menu"> <div id="menu-center"> <ul> <li><a href="#home">Home</a> </li> <li><a href="#portfolio">Portfolio</a> </li> <li><a href="#about">About</a> </li> <li><a href="#contact">Contact</a> </li> </ul> </div> </div> <div id="home"></div> <div id="portfolio"></div> <div id="about"></div> <div id="contact"></div>