Question

因此，与其他问题不同，我想从这里使用此代码：How do I switch my CSS stylesheet using jQuery?

我需要使用以下代码（jQuery）在多个css样式之间切换而不是两个：

$('#backgroundDefault').click(function (){ $('link[href="style1.css"]').attr('href','style.css'); }); $('#background1').click(function (){ $('link[href="style.css"]').attr('href','style1.css'); });

这可以吗？我喜欢样式之间的平滑过渡，不像我尝试过的许多其他代码示例。

Answer 1

是的，它会起作用。 <link>是<head>还是<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样式表之间切换

1 个答案: