我有一个菜单链接到同一页面上的内容,并通过 jQuery 淡入淡出 div,完美运行。
导航中的第一个链接附加了一个类(current_page_item),我想在单击导航中的任何其他链接时删除该类并将其添加到单击的链接中。
到目前为止,我已经尝试过类似的东西:
$(function() {
$("#nav-links a").click(function(){
$("#nav-links ul li").removeClass("current_page_item").find("li:last a").addClass("current_page_item");
});
});
这是行不通的。
我对 javascript 非常陌生,因此我们将不胜感激。
谢谢!
编辑:
这是导航的 HTML:
<div id="nav-wrap">
<ul class="group" id="nav-links">
<li class="current_page_item"><a href="#recent" class="linkclass recent">RECENT</a></li>
<li><a href="#work" class="linkclass work">WORK</a></li>
<li><a href="#who" class="linkclass who">WHO</a></li>
<li><a href="#services" class="linkclass services">SERVICES</a></li>
<li><a href="#contact" class="linkclass contact">CONTACT</a></li>
</ul>
</div>
编辑2:
使用下面的答案似乎仍然无法达到我想要的效果。也许是因为我正在使用的 jQuery 插件(魔术线)。关联
所以基本上我希望'线'留在点击的下方。如果我在正确的位置加载一个带有“current_page_item”的新页面,这会起作用,但是当我淡入淡出 DIV 时,我不能这样做。
该行反弹回具有“current_page_item”类的 li 项目。也许可以修改此代码以将类添加到单击的元素?
这是代码。
$(function() {
var $el, leftPos, newWidth,
$mainNav = $("#nav-links");
$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");
$magicLine
.width($(".current_page_item").width())
.css("left", $(".current_page_item a").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
$("#nav-links li a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
});