Question

I have now one page which has a default.css style
I have one style1.css file and another one is style2.css file.
I have one UI dropdownlist which has two options.

When I select one then apply style1.css and same thing for other.

The page should not be refresh.

How can I do this?

Answer 1

Given you have no specific context I would suggest looking into using jQuery toggleClass().

Say you have HTML like this where the div in this example uses a default style style1 and a button will switch out styles:

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

In addition to style1 you have also another style defined, say style2 likes this:

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

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

​To switch them when clicking on the button using the toggleClass() method you can do this:

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

See DEMO

You can off course trigger the toggle from anywhere, not just the button, this was only an example.