jQuery如何在类之间交换ID

Question

jsfiddle

我正在尝试设计"当前"导航选项卡。我在jQuery中也有一个悬停脚本，这造成了难以这样做的困难：

<ul class="nav">
    <li class="nav1" id="current"><a href="#">Images</a></li>
    <li><span>.</span></li>
    <li class="nav2"><a href="#">Articles</a></li>
    <li><span>.</span></li>
    <li class="nav3"><a href="#">Links</a></li>
    <li><span>.</span></li>
    <li class="nav4"><a href="#">Contact</a></li>
</ul>
//This bit does not work as expected. -->
$(".nav li a").click(function(){
    $("li#current").removeAttr('id');
    $(this).parent().attr("id","current");
});

基本上，我需要将ID从第一个LI锚移到单击的其他LI锚点，并通过Hover脚本识别此新放置的ID。

例如。当您单击"文章"时，"图像"以蓝色消失，而"文章"以蓝色出现，一旦移动鼠标，就会保持可见。

有人知道该怎么做吗？

Answer 1

更好的方法是在选定项目上添加额外的类current -class="nav1 current"

$(".nav li a").click(function(){
    $(this).parent().parent().find('li').removeClass('current');
    $(this).parent().addClass('current');
});

应该这样...必须检查。

编辑：是的。

Answer 2

您不交换HTML中的ID或名称，仅在类和其他瞬态属性中交换。否则，当代码期望在特定项目上ID时，您会引起副作用。将其视为改变您的社会安全号码，因为您周末有一件蓝色衬衫。

将当前类添加到您的CSS，并根据所选内容打开和关闭元素。

Answer 3

更新了小提琴：http：//jsfiddle.net/mvncz/17/基本上，您扭转了逻辑 - 您应该交换类，而不是ID。

$(".nav li a").hover(function(){
    var other = $("#" + $(this).parent().attr('id') + "x");
    other.addClass("hovered");
    $(this).mouseout(function(){
        other.removeClass("hovered");
    });
});
$(".nav li a").click(function(){
    $("li.current").removeClass('current');
    $("#" + $(this).parent().attr('id') + "x").addClass("current");
});