CSS樣式導航按鈕

Question

我正在嘗試復制ASP.NET網站中存在的“導航按鈕”： http : //forums.asp.net/user/editprofile.aspx# （您必須登錄才能查看選項卡）

如您所見，對於onClick事件，“選項卡”的背景變為白色，“文本”由藍色變為黑色。 onClick的選項卡上還應用了左上和右上邊框。 同樣在懸停按鈕上的按鈕的超鏈接的下划線出現。

我嘗試使用Firebug進行盡可能多的復制，但是我缺少一些東西。 例如，在我的小提琴中，按鈕的超鏈接仍帶有下划線。

我還不太清楚JQuery中的Click事件，這如何將背景顏色從藍色更改為白色，以及如何應用邊框。 如果有人可以對此進行改進，我將非常感激。

這是我到目前為止的內容： http : //jsfiddle.net/NinjaSk8ter/XrQys/

Answer 1

您可以從頭開始，但是已經為您完成了……而且做得很好。

查看Jquery UI選項卡 。

它們經過跨瀏覽器測試，並且非常靈活。 一行代碼，完成。 完整的交互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，然后右鍵單擊某個項目時可以說“檢查元素”，它會向您顯示應用於元素/鏈接的CSS類。

要刪除超鏈接上的下划線，請查看CSS的text-decoration 。

通常，使用jQuery更改按鈕的顏色，最簡單的方法是使用.click（）方法，然后向該對象添加一個類 。

$('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的background-color，這樣藍色和白色類實際上可以產生影響
• 根據點擊添加/刪除藍色/白色類
• 返回false，以確保anchor標簽沒有執行不必要的操作
• 白色==在這種情況下有效
• 向每個錨點添加class =“ blue”

您還可以對.common-heading-tabs a和.common-heading-tabs其他一些改進，但這不在此問題的范圍內。 我建議您閱讀W3School關於CSS的課程，以更好地了解可用的內容，因此您不必從站點復制和粘貼大量已編譯的CSS。 恕我直言。 :)

Answer 4

幾乎幾乎只有幾處奇數位，例如包含浮動的li並在默認選項卡上添加了一些邊框，這些邊框與背景顏色相同，因此在懸停或單擊時它們不會“跳轉”。 邊界總是在那里，顏色只是在變化。

然后我看到您已經內置了一個selected類，因此我只是使用了該類，並使它與:hover樣式匹配，並使用jQuery函數根據需要添加或刪除該類。

小提琴示例： 此處