javascript - jQuery中的样式切换器没有页面刷新

Question

我现在有一个具有 default.css 样式的页面
我有一个 style1.css 文件，另一个是 style2.css 文件。
我有一个 UI 下拉列表，其中有两个选项。

当我选择一个然后应用 style1.css 和其他相同的东西。

页面不应刷新。

我怎样才能做到这一点？

Answer 1

鉴于您没有特定的上下文，我建议您考虑使用 jQuery toggleClass()。

假设您有这样的 HTML，其中本示例中的 div 使用默认样式style1，并且按钮将切换样式：

<div id="myDiv" class="style1"></div>
<button id="myButton">Switch Styles</button>

除了style1你还定义了另一种风格，比如style2这样：

.style1{
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

.style2{
    width: 200px;
    height: 150px;
    border: 3px solid blue;
}

​要在单击按钮时切换它们，toggleClass()您可以这样做：

$(document).ready(function(){
    $("#myButton").on("click", function(){
        $("#myDiv").toggleClass("style2");
    });
});

见演示

当然，您可以从任何地方触发切换，而不仅仅是按钮，这只是一个示例。

Answer 2

查看http://api.jquery.com/addClass/和http://api.jquery.com/removeClass/