0

我的导航中有 4 个链接，我想在单击链接后更改 CSS。但是，单击另一个链接后，该链接不会变回原始 CSS。我怎样才能做到这一点？

例如，我单击“关于我们”，“关于我们”的 CSS 更改，然后单击“产品”，“产品”的 CSS 更改。如何让“关于我们”返回原始 CSS？

HTML：

<div id="nav">
<ul>
    <li><a href="#page1">&nbsp;Home&nbsp;</a></li>
    <li><a href="#page2">&nbsp;About Us&nbsp;</a></li>
    <li><a href="#page3">&nbsp;Products&nbsp;</a></li>
    <li><a href="#page4">&nbsp;Contact Us&nbsp;</a></li>
</ul>

jQuery：

$(function() {
    $("#nav li a").click(function () {
      $(this).css({'color': 'black', 'border-bottom': '3px dotted black', 'background-color': 'yellow'});
    });
});
4

2 回答 2

2

不要使用 jQuery 应用 CSS，而是在样式表中添加另一个类：

nav li a.active {
    color:black;
    border-bottom:3px dotted black;
    background-color:yellow;
}

然后用 jQuery 切换它：

$(function() {
    var navLinks = $("#nav li a");
    navLinks.click(function () {
        navLinks.removeClass('active');
        $(this).addClass('active');
    });
});
于 2012-10-10T10:19:11.803 回答
2

像这样的东西。

http://jsfiddle.net/bPeAm/

于 2012-10-10T10:22:57.373 回答