如何将html引导程序代码集成到javascript代码中？

Question

我写了一个html网站。 有一个使用引导程序创建的按钮。 我想更改按钮的设计以及其上的标签文本，具体取决于布尔变量。

这是两种类型的按钮：

<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代码中集成此html按钮？

    <script>
    var open = true;

    if (open = true) {


    } else {

    }

</script>

谢谢你的帮助！

Answer 1

您可以使用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> 

Answer 2

这是一个很好的示例，说明如何使用纯JavaScript通过单击按钮使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并匹配代码来简单地更改设计。