Question

我有一个按钮可以在＆＃34;灯光主题和＃34;之间切换。和'＆＃34;黑暗的主题＆＃34;，但我只设法让它改变一次，而不是再回来。我真的很感激任何帮助！

<link id="sheet" href="main.css" rel="stylesheet">

/

$(".themebutton").click(function() {
if($('a[href="main.css"]'))
{
  $("#sheet").attr('href','dark.css');
}
else {
  $("#sheet").attr('href','main.css');
}
});

也有办法阻止＆＃34;闪烁＆＃34;样式表加载时会发生什么？

Answer 1

实现此目的的最佳方法是为html标记创建一个类名。想象一下这两个类：

 .theme1 { 
    background:red;
 }
 .theme1 h1 {
     color: blue;
 }
 .theme2 {
    background: green;
 }
 .theme2 h1 {
     color: orange;
 }

您可以在没有闪烁的情况下进行切换，并且无需向服务器发出新请求：

 $('.change-theme-1').on('click', function() {
      $('html').addClass('theme1');
 }

在这里，您可以看到它正常运行。

$('.change-theme').on('click', function(e) {
  e.preventDefault();
  $('html').addClass('theme'+$(this).attr('rel'));
});

.theme1 { 
  background:red;
}
.theme1 h1 {
  color: blue;
}
.theme2 {
  background: green;
}
.theme2 h1 {
  color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
  <body>
    <h1>That's a header</h1>
    <button class="change-theme" rel="1">Theme 1</button><br>
    <button class="change-theme" rel="2">Theme 2</button>

如何在jquery / javascript中使用一个按钮在两个样式表之间交换

1 个答案: