JS选项卡以及事件

伯思

已于 2022-08-08 17:26:27 修改

阅读量150

点赞数

文章标签： javascript css 前端

于 2022-08-08 17:26:10 首次发布

本文链接：https://blog.csdn.net/hbl020305/article/details/126231136

版权

简单的选项卡案例

html代码

<div class="nav">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <div class="bom">
            <div class="show">a</div>
            <div>b</div>
            <div>c</div>
        </div>
    </div>

css代码


        .nav ul {
            display: flex;
        }
        
        .nav ul li {
            width: 100px;
            height: 30px;
            list-style: none;
            color: white;
            background-color: black;
            text-align: center;
            line-height: 30px;
            margin-left: 5px;
        }
        
        .active {
            background-color: yellow !important;
        }
        
        .bom div {
            width: 330px;
            height: 100px;
            background-color: aqua;
            display: none;
        }
        
        .show {
            display: block !important;
        }

js代码

//获取列表
var list = document.querySelectorAll(".nav ul li");
//获取下面的div
        var xia = document.querySelectorAll(".nav .bom div");

        console.log(xia)
        for (i = 0; i < list.length; i++) {
               //创建自定义函数
            list[i].dataset.index = i;
            //给每个li添加点击事件
            list[i].onclick = function() {
                for (j = 0; j < list.length; j++) {
                    //干掉所有
                    list[j].classList.remove("active");
                    xia[j].classList.remove("show");
                }
                //留下自己
                this.classList.add("active");
                var index = this.dataset.index;
                xia[index].classList.add("show")
            }

        }

js事件

组成：

（1）触发谁的事件：事件源

（2）触发的什么事件：事件类型

（3）触发以后做什么：事件处理函数

当我们想让元素做什么，就主要写在事件处理函数中

事件绑定:

方式1：

box1.onclick=function(){
     console.log("div1")
}
box1.onclick=function(){
     console.log("div2")
}

以上这种方式进行事件绑定时，后面的会覆盖掉前面的，故最终单击元素时只会打印出div2

方式2：

addEventListener()事件监听函数：可以绑定多事件函数，依次执行
         box2.addEventListener("click",function(){
             console.log("box2_1")
         })
         box2.addEventListener("click",function(){
             console.log("box2_2")
         })

此种方式可以给事件绑定多个事件处理函数，且不会被覆盖，依次执行

兼容性问题解决：主要是解决低版本ie浏览器的兼容性问题，但此方法ie11已经不支持了，此种绑定函数还需要在事件前面加上on，但使用addEventListener时已经不需要这样做了

box2.attachEvent("onclick",function(){
             console.log("兼容性")
         })

事件解绑

方式1：

box1.onclick=function(){
            console.log("谢谢惠顾")
            this.onclick=null
        }

方式2：

function test(){
             console.log("谢谢惠顾")
             //解绑
             this.removeEventListener("click",test)
         }
         box2.addEventListener("click",test)

兼容性问题解决：

function test2(){
            console.log("谢谢惠顾")
            //解绑
            box2.detachEvent("onclick",test2)
        }
        box2.attachEvent("onclick",test2)

事件类型

单击事件

div_0.onclick=function(){
           console.log("单击事件")
       }

双击事件

div_1.ondblclick=function(){
             console.log("双击事件")
        }

鼠标按下

div_2.onmousedown=function(){
            console.log("鼠标按下，不松手")
        }

鼠标移动

div_2.onmousemove=function(){
            console.log("鼠标移动")
        }

鼠标抬起

div_2.onmouseup=function(){
            console.log("鼠标抬起")
        }

移入

div_3.onmouseover=function(){
           console.log("移入")
       }

移出

div_3.onmouseout=function(){
            console.log("移出")
        }

键盘按下

username.onkeydown=function(){
            console.log("键盘按下")
        }

键盘抬起

username.onkeyup=function(){
            console.log("键盘抬起")
        }

表单获取/失去焦点

change事件和input事件

鼠标移动的小案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 360px;
            height: 511px;
            position: relative;
        }
        
        p {
            position: absolute;
            left: 0;
            top: 0;
            padding: 10px;
            width: 500px;
            height: 300px;
            background: rgba(0, 0, 0, .6);
            color: white;
            display: none;
            pointer-events: none;
        }
    </style>
</head>

<body>
    <div id="div1">
        <img src="img/mhl.jpg" alt="">
        <p>
            <strong>简介</strong><br>
            <span>在钱塘开茶铺的赵盼儿（刘亦菲 饰）惊闻未婚夫、新科探花欧阳旭（徐海乔 饰）要另娶当朝高官之女，不甘命运的她誓要上京讨个公道。
                在途中她遇到了出自权门但生性正直的皇城司指挥顾千帆（陈晓 饰），并卷入江南一场大案，两人不打不相识从而结缘。赵盼儿凭借智慧解救了被骗婚而惨遭虐待的“江南第一琵琶高手”宋引章（林允 饰）与被苛刻家人逼得离家出走的豪爽厨娘孙三娘（柳岩 饰），三位姐妹从此结伴同行，终抵东京，见识世间繁华。
                为了不被另攀高枝的欧阳旭从东京赶走，赵盼儿与宋引章、孙三娘一起历经艰辛，将小小茶坊一步步发展为东京最大的酒楼，揭露了负心人的真面目，收获了各自的真挚感情和人生感悟，也为无数平凡女子推开了一扇平等救赎之门</span>
        </p>
    </div>
    <script>
        var div1 = document.querySelector("#div1");
        var p1 = document.querySelector("#div1 p");
        div1.onmouseover = function() {
            p1.style.display = "block"
        }
        div1.onmouseout = function() {
            p1.style.display = "none"
        }
        div1.onmousemove = function(event) {
            // console.log(event)
            p1.style.left = event.offsetX + "px";
            p1.style.top = event.offsetY + "px";
        }
    </script>
</body>

</html>

鼠标移入小案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: url(../js/img/bg1.jpg) no-repeat;
        }
        
        div {
            width: 100%;
            background: rgba(0, 0, 0, .4);
            text-align: center;
        }
        
        img {
            width: 200px;
            height: 150px;
            margin: 20px 10px;
            border: 2px solid transparent;
        }
        
        img:hover {
            border: 2px solid white;
        }
    </style>
</head>

<body>
    <div>
        <img src="img/bg1.jpg" alt="">
        <img src="img/bg2.jpg" alt="">
        <img src="img/bg3.jpg" alt="">
        <img src="img/bg4.jpg" alt="">
        <img src="img/bg5.jpg" alt="">
        <img src="img/bg6.jpg" alt="">
    </div>
    <script>
        var img = document.querySelectorAll("img");
        var body = document.body;
        for (i = 0; i < img.length; i++) {
            img[i].onmouseover = function() {
                body.style.background = "url(" + this.src + ")"
            }
        }
    </script>
</body>

</html>