问CSS样式导航按钮

EN

我没有访问这个页面的权限，但如果你看一下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
}

未经测试的

http://jsfiddle.net/CrvJN/8/

关于我所做的事情的说明：

• 删除了活动的背景颜色。这样，蓝色和白色类实际上可以有一个基于click
• returned false的蓝色/白色类，以确保锚点标记不会执行有害的操作
• == ==活动在这种情况下，
• 将class=“蓝色”添加到每个锚点

您还可以在.common-heading-tabs a和.common-heading-tabs上做一些其他改进，但这超出了本问题的范围。我建议通过W3School关于CSS的课程来更好地了解可用的内容，这样您就不必从站点复制和粘贴这么多编译好的CSS。我的天。:)

你可以从头开始做这件事，但是you...and已经做得很好了。

查看Jquery UI tabs。

它们是跨浏览器测试的，而且非常灵活。一行代码，就完成了。用于交互的完整API。而且，为了得到你想要的外观，你可以控制一切，从悬停效果到背景，再到ThemeRoller中的边框，轻松地重新设置基本方案的样式，使其与你自己的完美匹配。

让许多人的力量来解决这个问题，你可以把你的努力应用到更多的important...or上，更好地帮助编程社区。

首先，您需要设置锚点的样式，使其不显示下划线：

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

注意:我没有仔细研究你提供的网站是如何实现这个特性的。然而，我确实演示了它通常是如何完成的。