js 点击更换背景图，简单易懂

最新推荐文章于 2023-02-15 18:12:42 发布

wx-18538561085

最新推荐文章于 2023-02-15 18:12:42 发布

阅读量1.7k

点赞数 2

本文链接：https://blog.csdn.net/qq_40137978/article/details/106684011

版权

先看一下效果图：

在这里插入图片描述

HTML代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/css.css"/>
        <script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
        <script type="text/javascript" src="js/js.js" ></script>


    </head>
    <body>
           <div id="button">
                    <!--tem仅用于布局通道按钮-->
                    <div class="tem"></div>
                    <div id="l_1" class="button_channel new" onclick="">1</div>
                    <div class="tem"></div>
                    <div id="l_2" class="button_channel" onclick="" >2</div>
                    <div class="tem"></div>
                    <div id="l_3" class="button_channel" onclick="">3</div>
                    <div class="tem"></div>
                    <div id="l_4" class="button_channel" onclick="">4</div>
                    <div class="tem"></div>
                    <div id="l_5" class="button_channel" onclick="">5</div>
                    <div class="tem"></div>
                    <div id="l_6" class="button_channel" onclick="">6</div>
                    <div class="tem"></div>
                    <div id="l_7" class="button_channel" onclick="">7</div>
                    <div class="tem"></div>
                </div>
    </body>
</html>

js代码 :

//对当前点击对象(通道号按钮)更换css样式
    $(document).ready(function(){
        $('#button .button_channel').click(function(){
            $(this).siblings().removeClass('new');
            $(this).addClass('new');
        })
    });

css代码:

html,body{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    text-align:center;
    overflow:scroll;
    overflow-x:hidden;
    overflow-y:hidden;
    overflow:-Scroll;overflow-y:hidden;
}


/*7个按钮*/
.button_channel{
    width: 50%;
    height: 10%;
    /*内*/
    margin-left: 20%;
    border:1px solid rgba(39,20,115,1.00);
    background: #304459;
}
/*视频按钮悬停*/
.button_channel:hover{
   cursor:pointer;
   background: #17a8ee;
}
/*通道按钮div的间隔*/
.tem{
    width:50%;
    height:2.8%;
}

/*addClass通道按钮*/
.new{
    background: #17afee;

}

/*按钮外层div*/
#button{
    /*float: right;*/
    /*border: 0px solid red ;*/
    width: 10%;
    height: 100%;
    margin-top:3.5% ;
    padding-top:0.2% ;
    background: transparent;
    font-size: 40px;

}

wx-18538561085

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
js 点击更换背景图，简单易懂

先看一下效果图：HTML代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/css.css"/> <script type="text/javascr
复制链接

扫一扫