代理加盟 2019全新代理计划 赚钱+省钱双管齐下,独立平台,丰厚利润!

您现在的位置: 秀站网 > 站长学院 > 建站教程 >

js点击选中radio为指定的div添加样式class

来源:未知 发布时间:2019-03-30热度:我要评论
在网站开发中,JS实现单选或多选时,为指定的p添加不同的class以实现不同的样式。实战案例: 在写下面代码前请先引用JS库,并把以下代码放在/head前。 ①两个或多个元素,实现点击后,指定元素增加/删除class样式 JS部分 script type=text/javascript language=javascr...

       在网站开发中,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>

本文地址:http://www.xiuzhanwang.com/news/1416.html

    责任编辑:秀站网

    发表评论

    评论列表(条)