切换css文件更换皮肤

http://stackoverflow.com/questions/32786088/pe

通过数组 属性来切换思想分常巧妙 简单

时用版：

<button data-theme="default" class="theme-link b1 btn" style="display:non">CSS1</button>
    <button data-theme="amelia" class="theme-link b2 btn" style="display:non">CSS2</button>
    <button data-theme="cerulean" class="theme-link b3 btn" style="display:non">CSS3</button>

    @*<button class="btn btn-large testbgcolor" style="display:non">背景颜色</button>*@
</div>
@*<script>
    var themes = {
        "default": "http://localhost:5000/css/plugins/owntest/owntest.css",
        "amelia": "http://localhost:5000/css/plugins/owntest/owntesttwo.css",
        "cerulean": "http://localhost:5000/css/plugins/owntest/owntestthre.css",
    }
    $(function () {
        //debugger
        var themesheet = $('<link href="' + themes['default'] + '" rel="stylesheet" />');
        themesheet.appendTo('head');
        
        $('.theme-link').click(function () {
            //debugger
            //alert("fff")
            var themeurl = themes[$(this).attr('data-theme')];
            themesheet.attr('href', themeurl);
        });
    });
    //$(function () {

    //    //alert('tt')
    //    $('.theme-link').addClass('color')

    //});
</script>*@

 

原版：

var themes = {
"default": "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css",
"amelia" : "//bootswatch.com/amelia/bootstrap.min.css",
"cerulean" : "//bootswatch.com/cerulean/bootstrap.min.css",
"cosmo" : "//bootswatch.com/cosmo/bootstrap.min.css",
"cyborg" : "//bootswatch.com/cyborg/bootstrap.min.css",
"flatly" : "//bootswatch.com/flatly/bootstrap.min.css",
"journal" : "//bootswatch.com/journal/bootstrap.min.css",
"readable" : "//bootswatch.com/readable/bootstrap.min.css",
"simplex" : "//bootswatch.com/simplex/bootstrap.min.css",
"slate" : "//bootswatch.com/slate/bootstrap.min.css",
"spacelab" : "//bootswatch.com/spacelab/bootstrap.min.css",
"united" : "//bootswatch.com/united/bootstrap.min.css"
}



$(function(){
var themesheet = $('<link href="'+themes['simplex']+'" rel="stylesheet" />');
themesheet.appendTo('head');
$('.theme-link').click(function(){
   var themeurl = themes[$(this).attr('data-theme')]; 
    themesheet.attr('href',themeurl);
});
});

<li class="dropdown">
  <ul class="nav navbar-nav">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-star"></i> Themes <b class="caret"></b></a>
        <ul class="dropdown-menu">
                <li><a href="#" data-theme="default" class="theme-link">Default</a></li>
                <li><a href="#" data-theme="amelia" class="theme-link">Amelia</a></li>
                <li><a href="#" data-theme="cerulean" class="theme-link">Cerulean</a></li>
                <li><a href="#" data-theme="cosmo" class="theme-link">Cosmo</a></li>
                <li><a href="#" data-theme="cyborg" class="theme-link">Cyborg</a></li>
                <li><a href="#" data-theme="flatly" class="theme-link">Flatly</a></li>
                <li><a href="#" data-theme="journal" class="theme-link">Journal</a></li>
                <li><a href="#" data-theme="readable" class="theme-link">Readable</a></li>
                <li><a href="#" data-theme="simplex" class="theme-link">Simplex</a></li>
                <li><a href="#" data-theme="slate" class="theme-link">Slate</a></li>
                <li><a href="#" data-theme="spacelab" class="theme-link">Spacelab</a></li>
                <li><a href="#" data-theme="united" class="theme-link">United</a></li>
        </ul>
    </li>
  </ul>
</li>

 

rmanently-apply-bootstrap-theme