如何在一個網頁中添加CSS樣式文件切換器？

我創建了一個onepage投資組合網站。現在它有兩個主要的stylesheet。一個是默認的（綠色），另一個是紅色的。現在我想做兩個button人們可以切換stylesheet彼此沒有頁面加載。如何在一個網頁中添加CSS樣式文件切換器？

您可以查看演示站點here.我想在我的網站同樣的事情。

我用下面code.It設計完美，但作爲演示site.Here是我的代碼，當我在icon點擊它不是擴大同：

HTML（標記）：

<div class="theme-settings"> 
    <a href="javascript:;" data-click="theme-settings-expand" class="theme-collapse-btn"><i class="fa fa-cog fa-spin"></i></a> 
    <div class="theme-settings-content"> 
     <ul class="theme-list clearfix"> 
      <li class="active"><a href="javascript:;" class="bg-green" data-theme="default"></a></li> 
      <li><a href="javascript:;" class="bg-red" data-theme="red"></a></li> 
     </ul> 
    </div> 
</div>

CSS（對於按鈕的代碼）：

.theme-settings .theme-collapse-btn { 
    position: absolute; 
    right: -50px; 
    top: 50%; 
    margin-top: -25px; 
    width: 50px; 
    height: 50px; 
    line-height: 50px; 
    font-size: 30px; 
    color: #000; 
    background: #fff; 
    background: rgba(255, 255, 255, .9); 
    border-radius: 0 4px 4px 0; 
    text-align: center; 
    box-shadow: 0 0 2px rgba(0, 0, 0, .4); 
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .4); 
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .4) 
} 
.theme-settings { 
    position: fixed; 
    left: -180px; 
    top: 200px; 
    z-index: 1020; 
    box-shadow: 0 0 2px rgba(0, 0, 0, .4); 
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .4); 
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .4); 
    width: 180px; 
    -webkit-transition: left .2s linear; 
    transition: left .2s linear 
} 
.theme-settings .theme-settings-content { 
    padding: 10px 5px; 
    background: #fff; 
    position: relative; 
    z-index: 1020 
} 
.theme-settings .theme-list { 
    list-style-type: none; 
    margin: 0; 
    padding: 0 
} 
.theme-settings .theme-list > li { 
    float: left 
} 
.theme-settings .theme-list > li + li { 
    margin-left: 5px 
} 
.theme-settings .theme-list > li > a { 
    width: 30px; 
    height: 30px; 
    border-radius: 3px; 
    display: block; 
    -webkit-transition: all .2s linear; 
    transition: all .2s linear; 
    position: relative 
} 
.theme-settings .theme-list > li.active > a:before { 
    content: '\f00c'; 
    font-family: FontAwesome; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    font-size: 14px; 
    color: #fff; 
    opacity: .4; 
    filter: alpha(opacity=40); 
    line-height: 30px; 
    text-align: center 
} 
.theme-settings.active { 
    left: 0 
} 
.bg-red { 
    background: #d93240!important 
} 
.bg-green { 
    background: #5bb12f!important 
}

我怎樣才能解決這個問題？或者任何人都可以告訴我這項工作的任何免費插件。提前致謝。

來源

2017-04-06 Chonchol Mahmud

不要切換樣式表。相反，應該根據放在'body'上的關鍵類定義你的CSS規則，例如'body.green #container {color：green; } body.red #container {color：red; }'然後可以根據需要添加/刪除/更改此類 –

這不是上述問題的重複。他想切換**樣式表**，而不是**類**。如果你讓我，我會高興地回答這個問題。 – Mary

@Mary我如何切換課程？ –

你可以，例如，使用jQuery和按一下按鈕樣式表之間進行切換。

<link rel="stylesheet" type="text/css" href="default.css" data-theme-switchable>

而且在你的JavaScript：

$.when($.ready).then(function() { 
    $('[data-theme]').on('click', function() { 
     var $stylesheetName = $(this).data('theme'); 
     $('link[data-theme-switchable]').attr('href', $stylesheetName + '.css'); 
    }); 
});

但它實際上會是更好的辦法，只是切換類，我。即的body和相應的格式。

$.when($.ready).then(function() { 
    $('[data-theme]').on('click', function() { 
     $('body').attr('class', $(this).data('theme')); 
    }); 

    // maybe set the class to the first found theme on load 
    $('[data-theme]:first').trigger('click'); 
});

然後......

body.default { ... } 
body.red { ... }

來源

2017-04-06 10:00:53 Mary

如何在一個網頁中添加CSS樣式文件切換器？

回答

相關問題