Question

菜单按钮处于活动状态时出现问题。总是有活动的最后一个菜单项。

如果我滚动，则没有任何变化。

如果我点击菜单按钮，它将是第二个活动状态，然后突然最后一个项目将再次激活。

我的代码：

＆＃13;

if ($(window).width() > 1200) {
	$(window).scroll(function() {
		if ($(".navbar").offset().top > 300) {
			$(".navbar-fixed-top").addClass("top-nav-collapse");
		} else {
			$(".navbar-fixed-top").removeClass("top-nav-collapse");
		}
	});
}
$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

＆＃13;

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top" data-offset="60">
    <nav class="navbar navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar top-bar"></span>
                <span class="icon-bar middle-bar"></span>
                <span class="icon-bar bottom-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html"><img src="images/rect-logo-white.png" /></a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
            	<li class="active">
               		<a href="#page-top" class="hvr-underline-from-center">top</a>
                </li>
                <li>
               		<a href="#about-us-section" class="hvr-underline-from-center">1</a>
                </li>
                <li>
                    <a href="#offer-section" class="hvr-underline-from-center">2</a>
                </li>
                <li>
                    <a href="#portfolio-section" class="hvr-underline-from-center">3</a>
                </li>
                <li>
                    <a href="#contact-section" class="hvr-underline-from-center">4</a>
                </li>
                <li>
                    <a href="#" class="hvr-outline-out"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<section id="top-section">
<div class="row"><div class="col-md-12">asads</div></div>
</section>

<section id="about-us-section">
	<div class="row"><div class="col-md-12">asads</div></div>
</section> 

<section id="offer-section">
<div class="row"><div class="col-md-12">asads</div></div>
</section>

<section id="portfolio-section">
<div class="row"><div class="col-md-12">asads</div></div>
</section>

<section id="contact-section">
<div class="row"><div class="col-md-12">asads</div></div>
</section>

＆＃13;

Answer 1

尝试将height: 100%添加到body

body {
  height: 100%;
}

Bootstrap菜单最后一项始终有效

1 个答案: