使用jQuery和下拉菜单的简单样式表切换器
Simple Stylesheet switcher using jQuery and a dropdown menu
目前我有一个样式表切换器,它使用javascript根据下拉菜单中的选择加载新的样式表。
我想重新编写代码,使用jQuery而不是javascript。有人能帮我吗?我四处寻找jQuery解决方案,尽管有很多,但不使用下拉菜单。这是我的代码:
<head>
<link href="colour/light.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function changeScheme()
{ var _head = document.getElementsByTagName('head')[0];
var _link = document.createElement('link');
_link.type = 'text/css';
_link.href = colour.colour.options[colour.colour.selectedIndex].value;
_link.rel = 'stylesheet';
_head.appendChild(_link);
}
</script>
</head>
<body>
<form action="#" name="colour" id="colour" onsubmit="return false;">
<select name="colour" onchange="changeScheme();">
<option value="colour/light.css">Light scheme</option>
<option value="colour/dark.css">Dark scheme</option>
</select>
</form>
</body>
谢谢你的帮助!
<head>
<link href="colour/light.css" rel="stylesheet" type="text/css" id="stylelink">
<script type="text/javascript">
function changeScheme()
{
$('#stylelink').attr('href',$('#colourselector').val());
}
</script>
</head>
<body>
<form action="#" name="colour" id="colour" onsubmit="return false;">
<select id="colourselector" name="colour" onchange="changeScheme();">
<option value="colour/light.css">Light scheme</option>
<option value="colour/dark.css">Dark scheme</option>
</select>
</form>
</body>
使您的解决方案100%jQuery(如Stefan建议的)
<head>
<link href="colour/light.css" rel="stylesheet" type="text/css" id="stylelink">
<script type="text/javascript">
$('#colourselector').change(function(){
$('#stylelink').attr('href',$(this).val());
});
</script>
</head>
<body>
<form action="#" name="colour" id="colour" onsubmit="return false;">
<select id="colourselector" name="colour">
<option value="colour/light.css">Light scheme</option>
<option value="colour/dark.css">Dark scheme</option>
</select>
</form>
</body>
相关文章:
- 为样式表切换器存储js cookie
- 与号.js多个视图切换器
- 通过Alloy UI(Liferay 6.2)在切换器中加载视频
- 当我单击返回第一个切换时,第二个切换器应该关闭
- Javascript样式表切换器
- 使用Javascript为样式切换器添加样式表的最佳方法
- 选中取消选中切换器
- jQuery内容面板切换器阻止访问表单元素
- 在 Jquery 中为语言切换器分配一个全局变量
- UIkit:将切换器选项卡设置为当前窗口哈希
- 任何 html 元素的 Javascript 样式编辑器工具栏
- 多语言语言切换器 asp.net
- 即时CSS样式切换器/滚轮
- 使用jQuery和下拉菜单的简单样式表切换器
- jquery css样式切换器将cookie设置为css
- css+jQuery样式.css切换器,用于新的jQuery版本
- 样式切换器单击后会跳到页面顶部
- Wordpress中的JavaScript样式切换器
- JavaScript样式表切换器不工作
- 在asp.net服务器上的JavaScript CSS样式切换器