Question

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

E.g。我点击“关于我们”，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'});
    });
});

Answer 1

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

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

Answer 2

像这样。

http://jsfiddle.net/bPeAm/

如何在单击其他链接后撤消CSS更改

2 个答案: