Question

我正在尝试设置“当前”导航标签的样式。我在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锚被点击，并将这个新放置的id识别为悬停脚本。

E.g。当您单击“文章”时，“图像”将以蓝色消失，“文章”将以蓝色显示，并在鼠标移动后保持可见。

任何人都知道怎么做？

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");
});

jQuery如何在类之间交换ID

3 个答案: