在网站开发中,JS实现单选或多选时,为指定的p添加不同的class以实现不同的样式。实战案例:
在写下面代码前请先引用JS库,并把以下代码放在</head>前。
①两个或多个元素,实现点击后,指定元素增加/删除class样式
JS部分
<script type="text/javascript" language="javascript">
<--
//radio的class名分别为test1,test2
$(function(){
$(".test1").change(function(){
$(".box").addClass("cur");
});
});
$(function(){
$(".test2").change(function(){
$(".box").removeClass("cur");
});
});
-->
</script>
html部分
<!--单选需要name相同,多选不同,下面同理-->
<input type="radio" name="type" class="test1" value="测试内容" checked>
<input type="radio" name="type" class="test2" value="测试内容2" >
<p class="box">测试box</p>
②两个元素或以上,实现选中的radio的父级元素增加/删除class
JS部分
<script type="text/javascript" language="javascript">
<!--
$(function(){
$(".box input").change(function(){
$(":checked").parent().addClass("cur").siblings().removeClass("cur");
});
});
-->
</script>
html部分
<p class="box">
<p><input type="radio" name="fruit" checked="checked" />苹果</p>
<p><input type="radio" name="fruit" />香蕉</p>
<p><input type="radio" name="fruit" />葡萄</p>
</p>
以上三个单选框,第一个是默认选中的,让选中的radio给<p>添加样式 class="cur"。
<p class="cur"><input type="radio" name="fruit" />香蕉</p>
③同一个元素,利用增加/删除class样式实现展开或隐藏
js部分
<script type="text/javascript">
$(document).ready(function(){
$(".opbtn").click(function(){
$(".full").toggleClass("none");//.full存在none则删除,反之增加none,多个元素用英文逗号隔开
$("#sub").toggleClass("min");
});
});
</script>
html部分
<style type="text/css">
.opbtn{cursor:pointer;}
.none{display:none;}
#sub{width:100px;height:300px;}
.min{width:150px !important;height:300px;}
</style>
<a class="opbtn">点击展开/隐藏</a>
<p class="full">苹果</p>
<p id="sub">香蕉</p>
|