我的导航中有 4 个链接，我想在单击链接后更改 CSS。但是，在我单击另一个链接后，该链接并没有变回原来的 CSS。我该怎么做？
例如我单击“关于我们”，“关于我们”的 CSS 发生变化，然后单击“产品”，“产品”的 CSS 发生变化。如何让“关于我们”恢复到原始 CSS？
HTML:
<div id="nav">
<ul>
<li><a href="#page1"> Home </a></li>
<li><a href="#page2"> About Us </a></li>
<li><a href="#page3"> Products </a></li>
<li><a href="#page4"> Contact Us </a></li>
</ul>
jQuery:
$(function() {
$("#nav li a").click(function () {
$(this).css({'color': 'black', 'border-bottom': '3px dotted black', 'background-color': 'yellow'});
});
});
最佳答案
不是将 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');
});
});
关于jquery - 单击另一个链接后如何撤消 CSS 更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12817004/