javascript - 如何在单页网站中添加 CSS 样式文件切换器？

Question

我创建了一个单页投资组合网站。现在它有 2 个主要的 stylesheet。一个是默认的(绿色)，另一个是红色的。现在我想制作两个 button，人们可以在其中切换 stylesheet 而无需加载页面。

您可以查看演示站点 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
}

我该如何解决这个问题？或者任何人都可以告诉我这项工作的任何免费插件。提前致谢。

Answer 1

例如，您可以使用 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');
    });
});

但是实际上，切换类是更好的方法，i。 e. 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 { ... }