Jquery 更改元素位置后的CSS样式

我有一个带有

s的简单菜单。 我想更改元素的位置并保持样式不变（我应该更改属于发生更改的元素的css）。 这是我的菜单： 代码， CSS:

HTML:

我试图更改的是HTML代码中的一个非常简单的更改，只需放置

但是我有同样的风格。。这是我试过的，但没有100%起作用：

---

我建议保留您的

编辑：

如果您确实需要/想要使用jQuery，您应该能够使用您已有的代码。

我刚刚将我的“当前”类命名为“已选定”。

更新小提琴下面

$(document).ready(function () {
    $('#menu').on('click', 'a', function () {
           $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
    }).find('a:first').click();
});

我建议保留您的


编辑：

如果您确实需要/想要使用jQuery，您应该能够使用您已有的代码。

我刚刚将我的“当前”类命名为“已选定”。

更新小提琴下面

$(document).ready(function () {
    $('#menu').on('click', 'a', function () {
           $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
    }).find('a:first').click();
});

我相信您所寻找的行为可以通过有效的html来实现

LI的直接父元素必须是UL、OL或MENU元素（请参见：w3.org/TR/html markup/LI.html#LI context）

HTML

$(document).ready(function () {
    $('#menu').on('click', 'a', function () {
        // Unassign .current from all <li>s in the #menu
        $('#menu').find('a').removeClass('current')

        // Assign .current to clicked on <li>
        $(this).addClass('current');
    });
});

我相信您所寻找的行为可以通过有效的html来实现

LI的直接父元素必须是UL、OL或MENU元素（请参见：w3.org/TR/html markup/LI.html#LI context）

HTML

$(document).ready(function () {
    $('#menu').on('click', 'a', function () {
        // Unassign .current from all <li>s in the #menu
        $('#menu').find('a').removeClass('current')

        // Assign .current to clicked on <li>
        $(this).addClass('current');
    });
});

带有
子项的
是无效的HTML。您的
标签应位于
标签内。你想做什么？当我点击
时，它做的事情与我点击
中的单词时做的事情相同，所以
同时出现在
和单词中，而不仅仅是第一个示例中的单词。你为什么要将
包装在一个文本中）。我不确定这是否合法即使在HTML5中，但既然您希望它看起来相同，并且可能以相同的方式运行，为什么要更改它呢？带有
子项的
不是有效的HTML。您的
标签应位于
标签内。你想做什么？当我点击
时，它做的事情与我点击
中的单词时做的事情相同，所以
同时出现在
和单词中，而不仅仅是第一个示例中的单词。你为什么要将
包装在一个文本中）。我不确定这是否合法即使是在HTML5中，但既然你希望它看起来相同，并且可能以相同的方式运行，为什么你要更改它？单击底部边框不会激活链接，我认为这就是OP的目的。整个LI应该是可点击的，而不仅仅是文本。我不希望它只是可点击的（我可以通过css（
cursor:pointer
）但我希望它也能激活链接。我认为对方的回答很好，只有一件事是不完整的，如果你能做到，请尝试使用jquery，如果没有，非常感谢你的帮助精彩的代码，只有一件事丢失了：| jquery？它不工作，它没有将李的风格设置为“.current”，为什么？单击底部边框不会激活链接，我认为这就是OP的目的。整个LI应该是可单击的，而不仅仅是文本。我不希望它只是可单击的（我可以通过css（
光标：指针
）但我希望它也能激活链接。我认为对方的回答很好，只有一件事是不完整的，如果你能做到，请尝试使用jquery，如果没有，非常感谢你的帮助精彩的代码，只有一件事丢失了：| jquery？它不工作，它没有将李的风格设置为“.current”，为什么？您没有查看jquery，我认为您也必须更改jquery中的某些内容，因此当我单击链接时，它的样式将更改为
。当前的
样式，可以吗？还有行（
）还应该激活链接，如果你能解决这两个问题，一切都会很完美，谢谢。我建议jQuery对于这个应用程序可能不是必需的。但是，我已经编辑了我的答案，以供jQuery使用。这可能只是吹毛求疵，但我通常会将display:block添加到li中，而不是锚定中，因为这确实很有用这里的块级元素。完美的代码真正完美的只有一件事，我会给你20个声誉，你能按原样将菜单居中吗？它的对齐是左的，我希望它在中间，这就是it@MikeW我明白你的意思。事实上，显示设置根本不是必需的，因为你没有查看jquery，我认为你必须改变在jquery中也添加了一些内容，因此当我单击链接时，其样式将更改为当前的
。您可以这样做吗？还有行（
）还应该激活链接，如果你能解决这两个问题，一切都会很完美，谢谢。我建议jQuery对于这个应用程序可能不是必需的。但是，我已经编辑了我的答案，以供jQuery使用。这可能只是吹毛求疵，但我通常会将display:block添加到li中，而不是锚定中，因为这确实很有用这里的块级元素。完美的代码真正完美的只有一件事，我会给你20个声誉，你能按原样将菜单居中吗？它的对齐是左的，我希望它在中间，这就是it@MikeW我明白你的意思。事实上，自从
ul#menu li {
    display:inline-block;
    margin-right: 10px;
}
ul#menu li a {
    border-bottom:4px solid #efefef;
    padding:2px 2px 7px 2px;
    text-decoration:none;
    font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
    color:#68759c;
}  
ul#menu li a:hover {
    color:#8895b8;
    border-bottom:4px solid #3d496a;
}

ul#menu li.selected a {
    border-bottom:4px solid #3d496a;
}  

$(document).ready(function () {
    $('#menu').on('click', 'a', function () {
           $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
    }).find('a:first').click();
});

$(document).ready(function () {
    $('#menu').on('click', 'a', function () {
        // Unassign .current from all <li>s in the #menu
        $('#menu').find('a').removeClass('current')

        // Assign .current to clicked on <li>
        $(this).addClass('current');
    });
});

a:hover {
    color: #0000FF;
}
ul#menu {
    margin:10;
    padding-left:13px;
    list-style-type:none;
    text-align: center;
}
ul#menu li {
    display: inline;
    margin: 0;
}
ul#menu li a{
    display: inline-block;
    border-bottom:10px solid #efefef;
    margin-right: 15px;
    padding: 5px 10px 5px 10px;
    text-decoration:none;
    font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif;
    color:#68759c;
}
ul#menu li a.current {
    border-color: #3d496a;
}
ul#menu li a:hover {
    border-color: #3d496a;
}