我正在尝试复制存在于 ASP.NET 站点中的导航按钮： http://forums.asp.net/user/editprofile.aspx#（你必须登录才能看到标签）
正如您所见，对于 onClick 事件，选项卡的背景变为白色，文本从蓝色变为黑色。还有一个左上边框和右上边框应用于 onClick 的选项卡。同样在悬停上，按钮的超链接的下划线也会出现。
我尝试使用 Firebug 尽可能多地进行复制，但我遗漏了一些东西。例如，在我的小提琴中，按钮的超链接仍然带有下划线。
我也很不清楚 JQuery 中的 Click 事件以及它如何将背景颜色从蓝色变为白色，以及如何应用边框。 如果有人可以对此进行改进，我将不胜感激。
这是我目前所拥有的：http://jsfiddle.net/NinjaSk8ter/XrQys/
【问题讨论】：
您可以从头开始执行此操作，但它已经为您完成了......并且做得很好。
它们经过了跨浏览器测试，并且非常灵活。一行代码，搞定。用于交互的完整 API。而且，为了获得您想要的外观，您可以控制从悬停效果到背景，再到 ThemeRoller 中的边框的所有内容，轻松重新设置基本方案的样式以完美匹配您自己的样式。
让很多人的力量来解决这个问题，您就可以将自己的精力投入到更重要的事情上……或者更好地帮助编程社区。p>
【讨论】：
我无权访问该页面，但如果您查看 CSS，应该可以很直接地看到他们在做什么。一个很好的方法是使用 Chrome，然后当您右键单击某个项目时，您可以说“检查元素”，它会向您显示应用于元素/链接的 CSS 类。
要删除超链接上的下划线，请查看 CSS 的 text-decoration。
通常用 jQuery 改变按钮的颜色，最简单的方法是使用 .click() 方法，然后在对象中添加一个class。
$('a#my_link').click(function(){
$(a#my_link.active).removeClass('active');
$(this).addClass('active');
... do other stuff
}
未经测试
关于我所做的注释：
.common-heading-tabs a 的背景色，这样蓝白类实际上可以产生效果您还可以对 .common-heading-tabs a 和 .common-heading-tabs 进行一些其他改进，但这超出了本问题的范围。我建议通过 W3School 的 CSS 课程来更好地了解可用的内容，这样您就不必从网站复制和粘贴这么多编译的 CSS。恕我直言。 :)
【讨论】：
首先，您需要设置锚点的样式，使它们不显示下划线：
ul li a:visited, ul li a:link {
text-decoration: none;
}
/* I might as well show the blue and white classes */
.blueClass {
background: blue; /*this should be the specific shade of blue you want */
}
.whiteClass {
background: white;
}
为所有选项卡指定 .blueClass 类，默认选项卡除外，它应该具有 .whiteClass
至于javascript，需要使用JQuery中的.click()函数：
$(function() {
$('#btnSiteOptions').click(function(e) {
e.preventDefault();
// Toggles the classes blueClass and whiteClass. You'll need to make these.
$(this).parent().toggleClass('blueClass whiteClass');
});
});
注意：我没有仔细研究您提供的网站是如何实现此功能的。但是，我确实演示了它通常是如何完成的。
【讨论】：
实际上几乎只有一些奇怪的位，例如包含浮动的 li，并在默认选项卡上添加一些边框，与它们的背景颜色相同，因此它们在悬停或单击时不会“跳跃”。边界总是存在的，只是颜色会改变。
然后我看到你已经内置了一个 selected 类，所以我只是使用它并使它与 :hover 样式匹配，并根据需要添加或删除该类。
【讨论】：