代理加盟 2019全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: cf阿拉维斯如何钻bug > 站長學院 > 建站教程 >

阿拉维斯vs莱加内斯:js點擊選中radio為指定的div添加樣式class

來源:未知 發布時間:2019-03-30熱度: ℃我要評論
在網站開發中,JS實現單選或多選時,為指定的p添加不同的class以實現不同的樣式。實戰案例: 在寫下面代碼前請先引用JS庫,并把以下代碼放在/head前。 ①兩個或多個元素,實現點擊后,指定元素增加/刪除class樣式 JS部分 script type=text/javascript language=javascr...

cf阿拉维斯如何钻bug www.rxtxrm.com.cn 織夢模板免費下載,無需注冊無需充值

       在網站開發中,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>

本文地址://www.rxtxrm.com.cn/news/1416.html

    發表評論

    評論列表(條)