我已经开发了单页网站,并且当向下滚动特定部分的导航菜单项时,在标题导航中使用了Bootstrap滚动间谍。滚动时我使用了四个菜单项,第一个菜单和最后一个菜单在下划线。 但是我们在第三部分滚动第二部分菜单项带有下划线。请任何人帮助我 enter image description here 如果我单击“定价”菜单项“功能项目”下划线,但“定价”菜单应下划线,请帮助先生
参考:http://floretmedia.net/temp/pbee/
.navbrdr .active {
border-bottom: 4px solid #86bd3a;
}
<body id="lcp1" data-spy="scroll" data-target=".navbar" data-offset="70">
<header>
<div class="custom-container">
<div class="header-right">
<div class="navbar-holder"> <!-- navbar-holder -->
<nav class="navbar navbar-default"> <!-- navbar-inverse -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed blue" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="ease cf">
<a class="navbar-brand" href="./">
<img src="images/logo.png" alt="sfatech Logo">
</a>
</div>
</div> <!-- /.navbar-header -->
<div id="navbar" class="collapse navbar-collapse cf"> <!-- nav-collapse -->
<ul class="nav navbar-nav navbar-right navbrdr">
<li class="active"><a href="./">HOME </a></li>
<li><a href="#features"> FEATURES </a></li>
<li><a href="#plans">PRICING</a></li>
<li><a href="#contact">CONTACT</a></li>
<li><a href="includes/enquiry_form.php" class="signup fancybox" data-fancybox-type="iframe">SIGN UP</a></li>
</ul> <!-- /.navbar-nav -->
</div> <!--/.nav-collapse -->
</nav> <!-- /.navbar-inverse -->
</div> <!-- /.navbar-holder -->
</div><!-- header-right -->
</div><!-- custom-container -->
</header>
答案 0 :(得分:0)
当您单击“定价”或“功能”菜单时,导航没有触及该部分的ID。这就是为什么不起作用。
如果您在滚动时已选中它,则可以正常工作,这是因为它正在触摸该部分的ID。