0

まず第一に、私は html/css にまったく慣れておらず、js と jquery についてほとんど知らないと言わなければなりません。

今私の問題。Bootstrap を使用して Web サイトを完成させています。スクロール ダウンで動作するさまざまなコンテナーがあります。スクロール js コードを探したところ、問題なく動作しましたが、問題は nav リンクがアクティブにならないことです。さまざまなスクロール スクリプトとソリューションを試してみましたが、実際の知識では解決方法がわかりません。繰り返しになりますが、スクリプトはナビゲーション リンクがアクティブにならないことを除けば正常に動作し、それがなくても Web は正常に動作します。

これは私のナビ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;
    })
})
}

4

1 に答える 1

0

ここで何をしようとしているのか正確にはわかりませんが、nav リンクをアクティブにするには、次のようなものを使用できます ( http://jsfiddle.net/wcRJQ/4/ ):

$(".nav li").each(function()
{
    $(this).click(function(e) 
    {
        $(".nav .active").removeClass("active");
        $(this).addClass("active");
    })
});
于 2012-11-06T11:10:27.600 に答える