單擊時更改顏色

Question

我想在點擊時更改超鏈接的顏色。

我使用了以下代碼並且它有效：

var current = "home";

function home()
{
    current = "home";
    update2();
}

function comp()
{
    current = "comp";
    update2();
}

function team()
{
    current = "team";
    update2();
}

function cars()
{
    current = "cars";
    update2();
}

function spons()
{
    current = "spons";
    update2();
}

function update2()
{
    if (current == "home"){
        document.getElementById('home').style.cssText='color:#FFE006;font-size:20pt;text-   shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
        document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
        document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
        document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
        document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
    } else if (current == "comp"){
        document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
        document.getElementById('comp').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
        document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
        document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
        document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
     } else if (current == "team"){
         document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('team').style.cssText='color:#FFE006;font-size:20pt;text-shadow:  -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
         document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
     } else if (current == "cars"){
         document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('cars').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
         document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
     } else if (current == "spons"){
         document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('spons').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
     }
 }

實際上，它起作用但出現了問題。 如您所見，當current設置為home/spons/cars/team/comp時，我嘗試更改顏色，大小和文本陰影等屬性。 當用戶單擊超鏈接時調用函數時current更改。

出現問題，因為我告訴它在以下情況下執行相同的屬性:hover 。 單擊按鈕后，其屬性將更改，其他超鏈接也將更改為白色和18磅大小。

現在，一旦用戶點擊超鏈接，它就會更改框架的源，它自己的屬性和其他超鏈接的屬性。 但是一旦我點擊它然后懸停在另一個超鏈接上，懸停的屬性不起作用，但javascript的屬性工作。

如果您無法理解我的問題，請查看http://www.xphoenix1.hpage.com/ 。 單擊一個菜單按鈕后，它也會更改其他按鈕屬性並停止懸停屬性。

如果你能夠理解我在說什么並找到解決方案，那么請回答。

先感謝您

Answer 1

為了公平起見，他們想要影響一些不僅僅是文字顏色的變化。 並且，不幸的是， 訪問狀態的大多數樣式不再像過去那樣有效 。

除了字體顏色之外，它們還使字體大小更大並添加/刪除文本陰影。

雖然，我同意，這種JS方法有點過頭了。

我對OP的建議是菜單鏈接實際上是單獨的頁面，而不僅僅是交換div。 然后，您可以通過任何方式將“當前”類移動從鏈接移動到鏈接 - 即使是靜態HTML，也可以手動移動。 然后根據它來設置樣式：

a.current {  //styles }

這種方式導致出錯的可能性要小得多，導航只能用於HTML和CSS - 不需要JS。

Answer 2

這在css中很簡單

a:hover{background-color:yellow;}

Answer 3

為超鏈接寫文字顏色，這樣寫

a:visited{
    color:red;
    }

更新：

好吧，如果你想使用JQuery，我們的想法是你將菜單作為<li>或任何其他元素，並將這些圖像作為背景圖像。 當您創建圖片時，白色文本和黃色一個在其他下方（CSS spriting），單擊菜單，您將一個名為selected的類添加到當前元素並移動上面的圖像，以便顯示黃色文本，然后刪除從所有其他菜單中選擇的類。 例如，我使用了<a>標簽。

.menu a{
   background-image:url('images/button.png');
}
.menu a.selected {
     background-image:url('images/button.png'):0 -50px;
}

$(".menu a").live('click', function() {
  $(".menu a").removeClass("selected");
  $(this).addClass("selected");
  return false;
});

在這里查看這篇文章

Answer 4

然后用

#home:visited, #comp:visited{
    color:red;
}

或者更好，將所有相關的錨點應用於className，例如'rav'（訪問后為紅色;）），這樣你就可以：

.rav:visited{ color:red; }

干杯!