javascript - 导航栏专注于列表的最后一部分

Question

我无法阻止我的导航栏专注于联系人，它应该专注于它所在的网页部分，但它没有，而是专注于联系人。当我删除联系人时，它会关注列表中具有页面滚动类的下一个。

http://www.paddykeoghgoode.com/

我最近一直在修改我的个人网站，我设法让网站的联系部分的顶部标题始终处于事件状态。

当检查网页上的元素时，列表类的联系人处于事件状态，这通常会导致此类问题发生。

<li class="page-scroll active">

虽然在我的实际源代码中它看起来像这样:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li class="hidden">
      <a href="#page-top"></a>
    </li>
    <li class="page-scroll">
      <a href="#portfolio">Portfolio</a>
    </li>
    <li class="page-scroll">
      <a href="#about">About</a>
    </li>
    <li class="page-scroll">
      <a href="#contact">Contact</a>
    </li>
    <li class="topmenu">
      <a href="http://www.paddykeoghgoode.com/blog">Blog</a>
    </li>
  </ul>
</div>

没有发生这种情况的实例。我相信这与类页面滚动有关，但无法确定是什么导致它自动悬停而不是悬停并专注于它所在的页面部分。

我认为这是导致问题的 JS，但我不确定要修改什么

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #1a242f;

我可以将背景颜色更改为任何颜色，但一旦我这样做，您就不能将鼠标悬停在联系人上，它与导航栏中的其他元素具有相同的效果。

这是可能也会影响它的 freelancer.js:

/*!
 * Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('body').on('click', '.page-scroll a', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

// Floating label headings for the contact form
$(function() {
    $("body").on("input propertychange", ".floating-label-form-group", function(e) {
        $(this).toggleClass("floating-label-form-group-with-value", !! $(e.target).val());
     }).on("focus", ".floating-label-form-group", function() {
         $(this).addClass("floating-label-form-group-with-focus");
     }).on("blur", ".floating-label-form-group", function() {
          $(this).removeClass("floating-label-form-group-with-focus");
      });
 });

// Highlight the top nav as scrolling occurs
$('body').scrollspy({
     target: '.navbar-fixed-top'
})

// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
    $('.navbar-toggle:visible').click();
});

Answer 1

看起来没有 JS 来处理将 active 类从一个菜单项更改为另一个菜单项。

将 freelancer.js 文件中的滚动功能编辑成如下内容:

$(function() {
    $('body').on('click', '.page-scroll a', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');

        $('.navbar-nav .active').removeClass('active');
        $anchor.closest('li').addClass('active');

        event.preventDefault();
    });
});

您还可以将此添加到您的 css 中，以防止网站标题在单击后保持黑色:

.navbar-default .navbar-brand:focus {
    color: #ffffff;
}