这是我的问题: 我有一个修改后的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;
$('
').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:
有可能是一个容易解决这一点,但我仍然对于新手。
2011-05-08
Peter