Question

我想知道如何在此页面上实现效果： http://templateocean.com/stamp/image-bg/2-home-style-two/index.html

左侧有面板，可以调整模板。我注意到的是我改变颜色，使用不同的css（blue.css，purple.css等）然而一切都发生了＃34;飞行＆＃34;没有重新加载网页。

它是如何实现的？

这可以应用于网页上的其他元素，例如背景从图片更改为视频吗？

Answer 1

如果您正在寻找一种不重新加载页面的方法，可以使用jQuery。

如果您真的想在页面上更改很多颜色，我建议您在课堂上添加一个课程。然后，您可以根据需要更改CSS。

我已经让你（基本）例子澄清了它：

$(function() {
    $('#options button').on('click',function() {
        $('body').addClass( $(this).val() );
    });
});

.blue main {
    background: lightblue;
}
.blue main span {
    border: 5px solid blue;
}

.green main {
    background: lightgreen;
}
.green main span {
    border: 5px solid green;
}

.yellow main {
    background: lightyellow;
}
.yellow main span {
    border: 5px solid yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="options">
    <button value="blue">blue</button>
    <button value="green">green</button>
    <button value="yellow">yellow</button>
</div>

<main>This is a text <span>with a span</span></main>

And a JSFiddle to play with it

Answer 2

有一些javascript绑定到颜色切换器上的点击，它会更改标题中链接标记的CSS文件引用。

这是javascript，位于demo.js文件中。

function() {
  var id = $(this).attr("id");

  $("#color-switch").attr("href", "css/colors/" + id + ".css");
}

这里是文档head中相应的样式表引用，上面的代码正在对其进行修改：

<!-- COLORS -->
<link rel="stylesheet" id="color-switch" href="css/colors/blue.css">

在飞行中切换CSS

2 个答案: