HTML Bootstrap 3不向UL LI添加活动类
[英]HTML Bootstrap 3 not adding active class to UL LI
问题描述
Im trying to use scroll-spy to add an active class to the ul li on a one page scroll and sticky nav, for some unknown reason i cant get this work with-in my project. 
我试图使用滚动间谍在一页滚动和粘性导航上添加一个活动的类到ul li ，由于一些未知的原因我不能在我的项目中得到这个工作。 Below is the layout of my menu: 以下是我的菜单布局：
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top my-nav" role="navigation">
<div class="container_full height">
<div class="navbar-header page-scroll height">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo-holder">
<img class="" src="img/logo-p.png"/>
<span>
<a class="page-scroll" href="#home-page">xxxxxx</a>
<i>xxxxxxx</i>
</span>
</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse height">
<ul class="nav navbar-nav height">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#home-page">item1</a>
</li>
<li>
<a class="page-scroll" href="#item2">item2</a>
</li>
<li>
<a class="page-scroll" href="#item3">item3</a>
</li>
<li>
<a class="page-scroll" href="#item4">item4</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container_full" id="site">
<section class="parallax">
<!-- HOME PAGE DISPLAY -->
<div id="home-page" class="home-g height-650">
<div class="parallax-layer parallax-back height-650" >
<div class="home">
</div>
//many divs css parallax--
The nav js file is below: nav js文件如下：
$('.parallax').scroll(function() {
if ($('.parallax').scrollTop() > 100) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
$(".my-nav").addClass("nav-resize");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
$(".my-nav").removeClass("nav-resize");
$(".moveLogo").removeClass("moveLogo-resize");
}
});
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
var position = $($anchor.attr('href')).offset().top + $('.parallax').scrollTop() ;
$('html,body,.parallax').stop().animate({
scrollTop: position
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
If i was to use the above method without the parallax divs etc this will work with no problems but at the moment the li class is active always on the last li item when scrolling down the page. 如果我在没有视差div等的情况下使用上述方法，这将毫无问题地工作，但是当向下滚动页面时， li类始终在最后一个li项上处于活动状态。
green = scroll-able content inside parent container" Blue ", green divs are to target id's. green =父容器内的可滚动内容“Blue”，绿色div是目标id。
.blue{
height:100%;
width:100%;
overflow:hidden;
}
.green // Has many divs
I tried the obvious to target the green > divs but it doesn't seem to work. 我尝试了显而易见的目标绿色> div但它似乎不起作用。
1 个解决方案
解决方案1
2 已采纳 2015-08-31 01:27:23
Your code didn't give enough to go off of, so I added a series of divs that are 1000px tall and have different background colors - all of which corresponded to the IDs in your nav menu - scroll spy is working. 你的代码没有给出足够的代码，所以我添加了一系列1000px高且具有不同背景颜色的div - 所有这些对应于导航菜单中的ID - 滚动间谍正在工作。 Perhaps you just didn't have enough content to scroll or were implementing the IDs incorrectly? 也许你只是没有足够的内容来滚动或错误地实现ID？
Note that I'm also using recent versions of Bootstrap and jQuery... 请注意，我也使用最新版本的Bootstrap和jQuery ......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/r29/html5.min.js"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top my-nav" role="navigation">
<div class="container_full height">
<div class="navbar-header page-scroll height">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo-holder">
<span>
<a class="page-scroll" href="#home-page">xxxxxx</a>
<i>xxxxxxx</i>
</span>
</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse height">
<ul class="nav navbar-nav height">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#home-page">item1</a>
</li>
<li>
<a class="page-scroll" href="#item2">item2</a>
</li>
<li>
<a class="page-scroll" href="#item3">item3</a>
</li>
<li>
<a class="page-scroll" href="#item4">item4</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container_full" id="site">
<section class="parallax">
<!-- HOME PAGE DISPLAY -->
<div id="home-page" class="home-g height-650">
<div class="parallax-layer parallax-back height-650" >
<div class="home">
</div>
<div style="height:1000px; background:pink"></div>
</div>
</div>
<div id="item2" class="home-g height-650">
<div class="parallax-layer parallax-back height-650" >
<div class="home">
</div>
<div style="height:1000px; background:red"></div>
</div>
</div>
<div id="item3" class="home-g height-650">
<div class="parallax-layer parallax-back height-650" >
<div class="home">
</div>
<div style="height:1000px; background:green"></div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.