我偶然发现了一个问题,我有一个Jquery脚本来改变原来的脚本使用按钮的样式表。我想使用基础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>
你可以通过在浏览器上打开DevTools来检查问题。在控制台选项卡中,您可以看到是否有任何错误。因为你没有把你的问题写清楚,所以我只是猜测你可能有问题。首先,确保包含jquery的脚本可以运行。其次,确保代码中的所有样式都在正确的路径上。第三,你在link标签中指定的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值为任何你想要的,但要确保你选择正确的