在CSS样式表之间切换 [英] Switching between css stylesheets
本文介绍了在CSS样式表之间切换的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
So, unlike other questions about this, I want to use this code from here: How do I switch my CSS stylesheet using jQuery?
我需要使用以下代码(jQuery)在多种CSS样式之间切换，而不是两种:
I need to switch between multiple css styles instead of two with the following code (jQuery):
$('#backgroundDefault').click(function (){ $('link[href="style1.css"]').attr('href','style.css'); }); $('#background1').click(function (){ $('link[href="style.css"]').attr('href','style1.css'); });
这可以工作吗?我喜欢样式之间的平滑过渡，这与我尝试过的许多其他代码示例不同.
Can this work? I like the smooth transition between styles, unlike many other code samples I tried.
推荐答案
是的，它将起作用. <link>是在<head>还是<body>中.
Yes, it will work. Whether <link> is either in the <head> or <body>.
这是一个基本示例，
var isToggled = false;
$(function() {
$('#btnSwitchCss').on('click', function() {
isToggled = !isToggled;
if (isToggled) {
$("link[href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css']").attr('href', '../');
} else {
$("link[href='../']").attr('href', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
}
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h2 class="text-center"> Switch CSS Style </h2>
<button id="btnSwitchCss">Switch</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
这篇关于在CSS样式表之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
