如何將HTML引導代碼集成到JavaScript代碼中？

我寫了一個html網站。有一個用bootstrap創建的按鈕。我想根據布爾變量改變按鈕和標籤文本的設計。如何將HTML引導代碼集成到JavaScript代碼中？

下面是兩種類型的按鈕：

<div class="alert alert-success" role="alert"> 
    <center><strong>Open</strong></center> 
</div> 

<div class="alert alert-danger" role="alert"> 
    <center><strong>Close</strong></center> 
</div>

我怎樣才能在這個JavaScript代碼集成這個網站的按鈕？：

<script> 
    var open = true; 

    if (open = true) { 


    } else { 

    } 

</script>

感謝您的幫助！

來源

2016-12-31 D.J.A.

你在使用jQuery嗎？ –

就像一句話，它應該是'if（open === true）{}'或'if（open）{}'單個等於在該上下文中無效 – Marco

是的，我是。謝謝 –

您可以使用預定義的引導類hidden（也有不贊成類hide）：

var open = false; 

if (open) { 
    $(".alert-success").addClass("hidden"); 
    $(".alert-danger").removeClass("hidden"); 
} else { 
    $(".alert-success").removeClass("hidden"); 
    $(".alert-danger").addClass("hidden"); 
};

，也可以定義只有一個按鈕：

var open = true; 
 

 
    if (open) { 
 
    $(".alert").addClass("alert-success"); 
 
    $(".alert").removeClass("alert-danger"); 
 
    $(".alert").html("<center><strong>Open</strong></center>"); 
 
    } else { 
 
    $(".alert").removeClass("alert-success"); 
 
    $(".alert").addClass("alert-danger"); 
 
    $(".alert").html("<center><strong>Close</strong></center>"); 
 
    };

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="alert" role="alert"></div>

來源

2016-12-31 15:08:13 Banzay

謝謝！你太棒了，這對我幫助很大！我很高興我註冊了此頁面！：D –

這裏是一個很好的例子，你可以使用純Java按鈕點擊使div消失腳本

var button = document.getElementById('button'); 

    button.onclick = function() { 
    var div = document.getElementByClass('alert alert-success'); 
    if (div.style.display !== 'none') { 
     div.style.display = 'none'; 
    } 
    else { 
    div.style.display = 'none'; 
    }

http://jsfiddle.net/andrewwhitaker/hefGK/

所以，當你想通過改變將style.display到style.color並匹配代碼藏漢你可以簡單地更改設計。

來源

2016-12-31 15:16:35

謝謝，但它應該改變，而不必按下按鈕 –

所以我強烈推薦jQuery，它會更簡單。 –

如何將HTML引導代碼集成到JavaScript代碼中？

回答

相關問題