CSS样式导航按钮

Question

我正在尝试复制ASP.NET站点中存在的导航按钮： http://forums.asp.net/user/editprofile.aspx#（您必须登录才能看到标签）

正如您在onClick事件中看到的那样，Tab的背景变为白色，Text从蓝色变为黑色。对于onClick，还有一个应用于Tab的左上边框和右边框。同样在悬停时，出现Button的超链接的下划线。

我试图用Firebug尽可能多地复制，但我错过了一些东西。例如，在我的小提琴中，按钮的超链接仍然带有下划线。

我也很不清楚JQuery中的Click事件以及它如何将背景颜色从蓝色变为白色，以及如何应用边框。 如果有人能改进这一点我会非常感激。

以下是我目前的情况：http://jsfiddle.net/NinjaSk8ter/XrQys/

Answer 1

你可以从头开始做这件事，但它已经为你完成了......并且做得很好。

查看Jquery UI tabs。

他们经过跨浏览器测试，非常灵活。一行代码，完成了。用于交互的完整API。而且，为了获得您想要的外观，您可以控制从悬停效果到背景，到ThemeRoller中的边框，轻松地重新设计基本方案以完全匹配您自己的内容。

让许多人的力量解决这个问题，你可以将你的努力用于更重要的事情......或者更好地帮助编程社区。

Answer 2

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

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

注意：我没有仔细查看您提供的网站如何实现此功能。但是，我确实证明了它通常是如何完成的。

Answer 3

我无法访问该页面但是如果你看一下CSS，那么看看他们正在做什么应该非常简单。一个很好的方法是使用Chrome，然后当你右键单击一个项目时，你可以说“Inspect Element”，它会显示应用于元素/链接的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/

关于我做了什么的说明：

• 删除了.common-heading-tabs a的背景颜色，这样蓝色和白色类实际上可以产生效果
• 根据点击
添加/删除蓝/白类
• 返回false以确保锚标记未执行不需要的操作
• white ==在这种情况下有效
• 为每个锚添加了class =“blue”

您可以对.common-heading-tabs a和.common-heading-tabs进行一些其他改进，但这超出了此问题的范围。我建议通过W3School的CSS课程来更好地了解可用的内容，这样你就不必从网站上复制和粘贴这么多编译的CSS。恕我直言。 ：）

Answer 4

它几乎只有几个奇怪的位，比如包含浮动的li并在默认选项卡上添加一些边框，颜色与背景相同，因此它们在悬停或点击时不会“跳跃”。边框总是在那里，颜色只会改变。

然后我看到你已经内置了一个selected类，所以我只是使用它并使它与:hover样式匹配，jQuery函数根据需要添加或删除该类。

示例小提琴：HERE