我在项目中使用select标签来更改网站的主题。这就像我的项目中的魅力一样,但我想用选择标记替换为带有jquery集成的切换开关。喜欢,youtube切换黑暗主题。 我怎么能这样做
这是我的代码。
HTML,JS和JQuery
$(function() {
$('.style-change').change(function() {
var style = $(this).val();
$('body').fadeOut("slow", function() {
$('link[rel="stylesheet"]').attr("href", style + ".css");
$('body').fadeIn("slow");
$.cookie("css", style, {
expires: 365,
path: '/'
});
});
});
});
$(document).ready(function() {
$("#style").val('<?php echo $style; ?>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<select name="" class="style-change form-control" id="style">
<option value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min">Default Style</option>
<option value="https://bootswatch.com/3/darkly/bootstrap.min">Night Mode</option>
</select>
PHP
<?php
if (isset($_COOKIE['css'])) {
$style = $_COOKIE['css'];
} else {
$style = 'default';
}
?>
我正在使用jQuery cookie库来保存cookie中的用户设置。
任何建议都会令人感激。
答案 0 :(得分:0)
请参阅此内容,这可能会对您有所帮助 - https://www.jqueryscript.net/form/jQuery-Plugin-To-Convert-Select-Box-Into-A-Switch-Control-Switch-Button.html
基本用法:
在文档中加载jQuery库和jQuery开关按钮插件。
创建常规选择框。
<option value="1">Item One</option>
<option value="2">Item Two</option>
<option value="3">Item Three</option>
<option value="4" selected>Item Four</option>
</select>
调用插件将其转换为可切换的切换按钮。
$( 'BTN-开关。')switchButton();
将自定义样式添加到此切换按钮。
.switch-select {
overflow: hidden;
border-radius: 3px;
}
.switch-select-button {
text-align: center;
font-size: 80%;
padding: 5px;
cursor: pointer;
background: rgb(224, 224, 224);
}
.switch-select-button:hover {
background: rgb(207, 55, 55);
color: white;
}
可用选项。
模板:“”,//自定义模板
class: "switch-select", // element class
innerclass: "switch-select-button", // inner element class
width: "", // default to its parent width
marker: "#3577EE, // marker color
markerback: "#B9B9B9", // marker background color
markerh: "4px", // marker size
onchange: "function(value){}" // callback function
答案 1 :(得分:0)
您可以使用复选框并使用纯CSS进行切换。
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
transform: translateX(26px);
}
&#13;
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
&#13;