时间戳

首页 > 解决方案 > 带有 Foundation 6 css 框架的 Codeigniter 3 样式表切换器

jquery - 带有 Foundation 6 css 框架的 Codeigniter 3 样式表切换器

问题描述

我偶然发现了一个问题，我有一个 Jquery 脚本来更改样式表，原始脚本使用一个按钮。我想使用带有 Foundation css 框架的开关，但我无法让它工作，也许我错过了一些东西。这里是 jquery 代码：

var click = false;
            $("#Switch").on("click", function () {
                if (!click) {
                    $('link[href*="<?php echo 
               base_url('/Foundation/assets/css/dark/foundation.css')?>"]').attr(
                        "href",
                        "<?php echo 
               base_url('/Foundation/assets/css/dark/foundation.css')?>"
                    );
                    click = true;
                    console.log("changed to style1.css");
                } else {
                    $('link[href*="<?php echo 
               base_url('/Foundation/assets/css/lumen/foundation.css')?>"]').attr(
                        "href",
                        "<?php echo 
               base_url('/Foundation/assets/css/lumen/foundation.css')?>"
                    );
                    click = false;
                    console.log("changed to style.css");
                }
            });

这是 header.php 代码：

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="<?php echo 
        'base_url'('Foundation/assets/css/foundation.css'); ?>">
        <link rel="stylesheet" href="<?php echo 
        'base_url'('Foundation/assets/css/main.css'); ?>">
        <link rel="stylesheet" href="<?php echo 
        'base_url'('FontAwesome/css/fontawesome.css'); ?>">
        <title><?php echo $title ?></title>
    
      </head>

这是开关：

<input
                        class="switch-input Switch"
                        id="Switch"
                        type="checkbox"
                        name="exampleSwitch"
                    />
                    
                    <label class="switch-paddle" for="Switch">
                        <span class="show-for-sr">Download Kittens</span>
                    </label>

标签： jquerycsscodeigniterzurb-foundation

解决方案

您可以通过在浏览器上打开 DevTools 来检查您遇到的问题。在控制台选项卡中，您可以查看是否有任何错误。因为你没有把你的问题写清楚，所以我只是猜测你可能遇到的问题。首先，确保包含 jquery 的脚本可以运行。其次，确保代码中的所有样式都在正确的路径中。第三，链接标签中的特定href错误，因此jquery无法更改属性值，更改为：

$('link[href*="<?php echo base_url('/Foundation/assets/css/foundation.css') ?>"]').attr(
                    "href",
                    "<?php echo
                        base_url('/Foundation/assets/css/dark/foundation.css') ?>"
                );

首次加载时， href 属性是Foundation/assets/css/foundation.css但在您的代码中，'/Foundation/assets/css/dark/foundation.css'因此它不能更改值。将您的 href 值更改为您想要的任何值，但请确保您选择正确。

推荐阅读