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");
    });
});

请参阅DEMO

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

Answer 2

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

jQuery中的样式切换器，无需刷新页面

2 个答案: