首先,我需要说我对HTML/CSS非常新,并且很少知道JS和JQuery。
现在我的问题。我正在用Bootstrap完成一个网站,它的容器不同,可以向下滚动。我寻找了滚动JS代码,它运行良好,但问题是导航链接不再活跃。我已经尝试使用不同的滚动脚本和解决方案,但是凭借我的实际知识,我不知道如何解决它。同样,该脚本除了没有使NAV链接活动活动之外,脚本还不错,并且网络也可以正常工作。
这是我的导航html:
<div class="navbar navbar-inverse navbar-fixed-top" id="navigation">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span><i class="icon-reorder"></i></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
<a href="#tebamar" title="tebamar" class="scroll-page"><i class="icon-home icon-white"></i> Tebamar</a>
</li>
<li class="#">
<a href="#quien" title="quien" class="scroll-page"><i class="icon-group icon-white"></i> Nosotros</a>
</li>
<li>
<a href="#que" title="que" class="scroll-page"><i class="icon-th icon-white"></i> Qué hacemos</a>
</li>
<li>
<a href="#donde" title="donde" class="scroll-page"><i class="icon-map-marker icon-white"></i> Dónde</a>
</li>
<li>
<a href="#como" title="como" class="scroll-page"><i class="icon-briefcase icon-white"></i> Cómo</a>
</li>
<li>
<a href="#contacto" title="contacto" class="scroll-page"><i class="icon-envelope-alt icon-white"></i> Contacto</a>
</li>
</ul></div></div></div></div>
这是我正在使用的脚本:
<script>
$(document).ready(function() {
// Smooth animation when page scrolls
$("a.scroll-page").scrollToSection()
/* Initialise Carausel */
$('.carousel').carousel();
/* Initialise Tooltip */
$('[rel="tooltip"]').tooltip();
});
jQuery.fn.scrollToSection = function(settings) {
settings = jQuery.extend({
speed : 1000
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
if(elementClick == "#home"){
destination = 0;
}
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick;
});
return false;
})
})
}
我不确定您在这里要做什么,但是要使导航链接活动,您可以使用类似的东西(http://jsfiddle.net.net/wcrjq/4/):
$(".nav li").each(function()
{
$(this).click(function(e)
{
$(".nav .active").removeClass("active");
$(this).addClass("active");
})
});