0

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 锚点，并让悬停脚本识别这个新放置的 id。

例如，当您单击“文章”时，“图像”会以蓝色消失，而“文章”会以蓝色显示并在鼠标移动后保持可见。

有人知道怎么做吗？

4

3 回答 3

1

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

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

应该是这样的……得检查一下。

编辑：是的，它有效。

于 2012-10-21T16:31:40.833 回答
0

您不交换 html 中的 ID 或名称，只交换类和其他临时属性。否则，当代码期望 Id 出现在特定项目上时，您会产生副作用。可以将其视为更改您的社会安全号码，因为您周末穿了一件蓝色衬衫。

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

于 2012-10-21T16:24:30.503 回答
0

更新了你的小提琴： 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");
});
于 2012-10-21T16:35:31.637 回答