用javascript onclick設置CSS顏色

嗨，我想讓我的菜單鏈接變紅，當我在該頁面上，它不工作。用javascript onclick設置CSS顏色

HTML：

<li><a id="home" onclick="changeClass('home')" href="index.php">Home</a></li>

CSS：

#topMenu li{ 
    display:inline; 
    margin-right:60px; 
    font-size:12px; 
    font-weight:bold; 
    color:#000; 
    text-decoration:none; 
    } 

#topMenu li a{ 
    color:#000; 
    text-decoration:none; 
    } 

#topMenu li a:hover{ 
    color:#666; 
    text-decoration:underline; 
    } 

.topMenuon{ 
    color:#F00 
    }

的Javascript：

function changeClass(id) 
    { 
     var element = document.getElementById(id); 
     element.className = element.className + 」topMenuon」; 

    }

如何我能得到這個工作任何想法？

來源

2012-09-04 1ftw1

這是簡單的包括jQuery和做到這一點：

$('#home').on('click',function(){ 

    $(this).addClass('topmenuon'); 

});

但是，它不會像，如果你要到另一個網頁的工作。你必須以某種方式在javascript/jquery中檢測你的頁面（使用url中的內容，或者在頁面上使用標識符，例如章節標題），然後在你訪問該頁面時添加你的類（或者，如果服務器直接渲染，則根本不要調用它）。無論如何，如果您要離開網頁，就不能使用onclick，新頁面無法知道您是否正在進行完整回發而不是ajax！

來源

2012-09-04 09:24:12 sajawikio

不會去一個新的頁面有全都包括在 – 1ftw1

使用jQuery - 這在<head> ...

<script src="yourPath/jquery_1.8.0_min.js" type="text/javascript"></script>

然後...

$(document).ready(function(){ 

    $("#home").addClass('topMenuon'); 

}

是會做到這一點...

小號

來源

2012-09-04 09:25:00

你重寫代碼的PHP，所以它完全一樣的東西，但有很多代碼更千字節，而沒有解決問題。 – Quentin

@Quentin - 你是對的！感謝您指出。經過審查，肯定上面的更新就足夠了，不是嗎？重新使用更多的代碼，「我遵循你的優越知識」;） –

你可能想要做那個服務器端，但如果由於某種原因你不能使用而且你不能使用jQuery：

function changeClass (id) { 
    var el = document.getElementById(id); 
    if (el.href == location.pathname) el.className += 'topMenuon'; 
};

來源

2012-09-04 09:29:01

平原JS

window.onload = function(){ 
    document.getElementById("home").onclick = function(){ 
     this.className +=" topMenuon" ; 
    } 
}

編輯

你可能去一個新的頁面上的鏈接的點擊。因此，上面的代碼不會改變鏈接的類，因爲你現在正在一個新的頁面上。

您可能需要將該類添加到使用PHP的鏈接（我假設您正在使用它）。

來源

2012-09-04 09:30:00

應用爲

var element = document.getElementById('home'); 
     element.setAttribute("className", newClass);

來源

2012-09-04 09:31:16

function changeClass() 
     { 
      var element = document.getElementById('home'); 
      element.className += 'topMenuon'; 
     } 


<li><a id="home" onclick="changeClass();" href="#">Home</a></li>

來源

2012-09-04 09:34:13

用javascript onclick設置CSS顏色

回答

相關問題