码迷,mamicode.com
首页 > Web开发 > 详细

如何更好的通过js应用css-遁地龙卷风

时间:2017-09-17 15:03:44      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:contain   query   set   习惯   port   bsp   col   应用   stat   

我们有如下需求,当点击按钮时,下面的div变颜色  有更好的实现欢迎提出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #test .bg_container{
            width: 200px;
            height: 100px;
            background-color: red;
        }
        #test  .active ~ .bg_container{
            
            /*尽管这里不需要!important  但这是个好习惯*/
            background-color: black !important;
        }
    </style>
</head>
<body>
    <div id="test">
        <button class="switch">switch</button>
        <div class="bg_container"></div>
    </div>
</body>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$("#test .switch").click(function(){
    $(this).toggleClass("active")
})
</script>
        
</html>

 

结语

欢迎加入QQ群662546586

欢迎打赏

技术分享

如何更好的通过js应用css-遁地龙卷风

标签:contain   query   set   习惯   port   bsp   col   应用   stat   

原文地址:http://www.cnblogs.com/resolvent/p/7535207.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!