在2个CSS之间切换

提问者：小点点

我有一个网站，它包括index.html和style.css和images文件夹。并且，我想在我的网站的主页面上创建一个按钮“切换到另一个主题”（所以index.html)，它将在两个CSS之间切换。你能告诉我吗：

是否需要有两个css，如-style1.css和style2.css？

我是否需要有2个索引页

a）link href=“css/style1.css”rel=“stylesheet”type=“text/css”media=“all”/>

b）link href=“css/style2.css”rel=“stylesheet”type=“text/css”media=“all”/>

谢谢你

下面是index.html的头部和正文部分，所以在正文部分我有切换Css，所以我只需要函数，将切换之间的Css，我有。我有原始的style.css和我的第二个style2.css

null

<head>
<title>TecKnowBros</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/slider.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/style2.css" rel="alternate stylesheet" type="text/css" media="all"/>
</head>

null

<body>
  <div class="wrap">
    <div class="header">
        <div class="headertop_desc">
            <div class="callus">
                 <p><span>Contact Us:</span><span class="number"> 07400000000</p>
            </div>
            <div class="account_desc">
                <ul>
                    <li><a href="#">My Account</a></li>
                    <li><a href="#">Register</a></li>
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Switch CSS</a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
        <div class="header_top">
            <div class="logo">
                <a href="index.html"><img src="images/logo.png" alt="" /></a>
            </div>
              <div class="cart">
                   <p><span>Cart:</span><div id="drdw" class="wrapper-dropdown-2"> No items -  £0.00
                    <ul class="dropdown">
                            <li>Cart is Empty</li>
                    </ul></div></p>
              </div>

共1个答案

匿名用户

解决这类问题的一种常见方法是为每个主题设置两种CSS类，并在类之间切换。请考虑以下内容：

<body class="theme1">

或

<body class="theme2">

等...

在CSS中，您将在每个主题下定义所有元素，因此当您想要更改主题时，只需将类更改为该主题。它看起来像这样：

style.css

.theme1 { ... }
.theme1 div{ ... }
(etc)

.theme2 { ... }
.theme2 div{ ... }
(etc)

然后只需使用javascript在主题之间切换即可。如果您向我们提供一些代码，我们将能够帮助您修复任何错误和/解决一些问题，但在此之前，这是我真正能说的帮助。祝你好运！