更改當前頁面的li元素ID

這是我的問題：我有一個修改後的spasticNav jQuery腳本，用於在id項中選擇「li」的項目上設置「blob」的導航菜單。當您將鼠標懸停在菜單中的另一個鏈接上時，blob會移動，但會重置爲id =「selected」的li項目。更改當前頁面的li元素ID

這一切工作正常，但李項目必須有id =「selected」或blob不會顯示。我希望能夠將當前頁面的li項目的id設置爲「selected」，而無需爲每個頁面製作唯一的導航列表。

這裏是jQuery的：

(function($) { 

$.fn.spasticNav = function(options) { 

    options = $.extend({ 
     overlap : -15, 
     speed : 500, 
     reset : 1500, 
     color : '', 
     easing : 'easeOutExpo' 
    }, options); 

    return this.each(function() { 

     var nav = $(this), 
      currentPageItem = $('#selected', nav), 
      blob, 
      reset; 

     $('<li id="blob"></li>').css({ 
      width : currentPageItem.outerWidth() + options.overlap, 
      height : currentPageItem.outerHeight() + options.overlap, 
      left : currentPageItem.position().left - options.overlap/2, 
      top : currentPageItem.position().top - options.overlap/2, 
      backgroundColor : options.color 
     }).appendTo(this); 

     blob = $('#blob', nav); 

     $('li:not(#blob)', nav).hover(function() { 
      // mouse over 
      clearTimeout(reset); 
      blob.animate(
       { 
        left : $(this).position().left - options.overlap/2, 
        width : $(this).width() + options.overlap 
       }, 
       { 
        duration : options.speed, 
        easing : options.easing, 
        queue : false 
       } 
      ); 
     }, function() { 
      // mouse out  
      reset = setTimeout(function() { 
       blob.animate({ 
        width : currentPageItem.outerWidth() + options.overlap, 
        left : currentPageItem.position().left - options.overlap/2 
       }, options.speed) 
      }, options.reset); 

     }); 

    }); // end each 

}; 

});

，這裏是我的html：

<div id="navcontainer">  <!--navigation--> 
    <div id="nav"> 
    <ul> 
     <li id="selected"><a href="index.html">Home</a></li> 
     <li><a href="about_us.html">About Us</a></li> 
     <li><a href="ministries.html">Ministries</a></li> 
     <li><a href="calendar.html">Calendar</a></li> 
     <li><a href="resources.html">Resources</a></li> 
     <li><a href="contact.html">Contact</a></li> 
    </ul> 
    </div> 
</div>

有可能是一個容易解決這一點，但我仍然對於新手。

來源

2011-05-08 Peter

確保沒有資產淨值李的有一個硬編碼id="selected"，那麼你可以檢查導航HREF中與當前URL和動態添加ID如下：

$('#nav').find('li').each(function(i, ele){ 
    if (window.location.href.indexOf($(this).find('a').attr('href')) >= 0) { 
     this.id = "selected"; 
    } 
});

來源

2011-05-08 23:07:23 mVChr

我是否需要在我的jQuery添加此腳本，如果是，在哪裏？ – Peter 2011-05-09 04:39:16

就在準備好的'$（function（）{}）;'中的任何地方，不在插件中。 – mVChr 2011-05-09 04:40:40

完美的工作！謝謝！我確實需要爲每個頁面添加一個標題頁，以便它能夠正常工作，但這正是我計劃要做的，所以這一切都奏效了。 – Peter 2011-05-09 04:59:20

更改當前頁面的li元素ID

回答

相關問題