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

但它实际上是更好的方法来切换课程，我。即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 { ... }

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

1 个答案: