使用 JQuery/JS 和选择框根据选择更改样式表我希望用户能够从下拉选择框中选择“ super 管理员”并拥有包含用户描述的 div级别“ super 管理员”(位于表单下方)以更改其
.superAdmin div {background-color: #000;}
我假设它对 onChange(); 进行了某种形式的操纵处理。
抱歉，如果这个问题低得离谱，但我是 JS 的真正初学者，更不用说 JQuery 了。 +1 如果您还可以提供确切的代码实现方式(在 <head></head> 标签中放置什么内容)
在此先感谢，这个站点的巨大支持者(我遇到的所有问题中的 90% 已经在这里被问到，我只是找不到任何关于这个...)
最佳答案
假设您有一个 CSS 样式表，其中包含您可能想要添加的所有类的定义:
.user {background-color: #F00;}
.admin {background-color: #0F0;}
.superAdmin {background-color: #00F;}
并且您有选择框的 HTML:
<select id="css-changer">
<option></option>
<option value="user">User</option>
<option value="admin">Admin</option>
<option value="superAdmin">Super Admin</option>
</select>
对于您的 div:
<div id="user">User div</div>
<div id="admin">Admin div</div>
<div id="superAdmin">Super Admin div</div>
然后你的 javascript 与 jQuery 将是:
$(document).ready(function() {
$("#css-changer").change(function() {
var value = $(this).find("option:selected").val();
switch(value) {
case "user":
$("#user").addClass("user");
$("#admin,#superAdmin").removeClass(); // removes all classes
break;
case "admin":
$("#admin").addClass("admin");
$("#user,#superAdmin").removeClass(); // removes all classes
break;
case "superAdmin":
$("#superAdmin").addClass("superAdmin");
$("#user,#admin").removeClass(); // removes all classes
break;
}
});
});
您可以 see this working .
要在您的页面中获取 JS 和 CSS，请创建一个具有正确定义的外部样式表并将其包含在内 as described by the spec带有如下标签:
<link href="mystyle.css" rel="stylesheet" type="text/css">
并确保包括 jQuery 和一个外部 javascript 文件(使事情不引人注目)。要包含它们，请使用如下所示的 HTML:
<!-- jQuery goes first! -->
<script src="path/to/jQuery/CDN/jquery-min-1.5.1.js" type="text/javascript"></script>
<script src="myExternal.js" type="text/javascript"></script>
关于jquery - 使用 JQuery/JS 和选择框根据选择更改样式表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5719102/