單擊它時更改div的類別？

點擊它時，如何更改div類名稱？例如：單擊它時更改div的類別？

<div class="first_name" onclick="changeClass();" id="first_name"></div>

我想改變它，如下所示，當用戶點擊的div

<div class="second_name" onclick="changeClass();"></div>

我寫的JavaScript作爲：

<script language="javascript"> 
    function change_autorefreshdiv(){ 
    var NAME = document.getElementById("first_name") 
    NAME.className="second_name" 
    } 
</script>

它的工作第一個實例只要。這是在頁面加載，如果我點擊它，first_name被改爲second_name。但再次單擊它，它不會將second_name恢復爲first_name。

來源

2011-10-29 user632347

您還想刪除'id'屬性嗎？ –

您必須定義第二個類的名稱。目前，您已經擁有了一個函數，它將類名更改爲硬編碼值，與當前類名無關。另見：MDN: if...else

function change_autorefreshdiv(){ 
    var NAME = document.getElementById("first_name"); 
    var currentClass = NAME.className; 
    if (currentClass == "second_name") { // Check the current class name 
     NAME.className = "first_name"; // Set other class name 
    } else { 
     NAME.className = "second_name"; // Otherwise, use `second_name` 
    } 
}

來源

2011-10-29 19:52:36

輝煌。非常感謝您;） – user632347

@ user632347如果您有興趣學習基本/高級javaScript，請查看您沒有指定的https://developer.mozilla.org/zh/JavaScript/Guide –

這是因爲沒有代碼可以這樣做。添加一點檢查。我還添加了一些分號。我想知道你的腳本是否會在第一時間發揮作用。

<script language="javascript"> 
function change_autorefreshdiv(){ 
    var NAME = document.getElementById("first_name"); 
    if (NAME.className==="second_name") 
    { 
    NAME.className="first_name"; 
    } 
    else 
    { 
    NAME.className="second_name"; 
    } 
} 
</script>

來源

2011-10-29 19:53:33 GolezTrol

您必須使用if -statement來反轉它。這裏有一個例子：

function change_autorefreshdiv(){ 
    var NAME = document.getElementById("first_name") 
    var currentClass = NAME.className; 
    if(currentClass == "second_name"){ 
     NAME.className = "first_name"; 
    } else { 
     NAME.className = "second_name"; 
    } 
}

來源

2011-10-29 19:53:35 Marcus

簡單的JavaScript函數，把它放在你的application.js，或腳本標籤： - （應包括執行下列函數的jQuery）

function changeClass(){ 
     $("#first_name").attr("class", "class-name-you-want-to-assign"); 
    }

來源

2012-12-06 08:02:10

，解決方案需要jQuery或類似框架 –

感謝Ivan的觀點。 –

相當晚答案，但標記爲答案的反應可以縮短：

function change_autorefreshdiv(){ 
    var NAME = document.getElementById("first_name"); 
    NAME.className = (NAME.className == "second_name") ? "first_name" : "second_name"; 
}

這是if-else結構的縮寫符號。它檢查className是否等於「second_name」。如果是，則currentClass變量將變成「first_name」，如果不是（意思是「first_name」），則變爲「second_name」。

來源

2013-04-16 12:31:23

-1

document.getElementById("SidMenu6").className = "start active";

來源

2014-11-19 13:48:56

單擊它時更改div的類別？

回答

相關問題