开发者社区> 光银努力吧> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

第15天,JavaScript之事件介绍

简介: 目录 1、onload 2、onsubmit 3、onselect 4、onchange 5、onkeydown 6、onmousemove、onmouseleave、onmouseout 7、事件传播 8、实例练习 8.
+关注继续查看

目录

1、onload
2、onsubmit
3、onselect
4、onchange
5、onkeydown
6、onmousemove、onmouseleave、onmouseout
7、事件传播
8、实例练习
    8.1 select移动
    8.2 二级联动
    8.3 实现表格的正反选及全选
    8.4 搜索框实现
    8.5 跑马灯及tab切换

W3Cschool Html DOM 事件对象

1、onload

onload事件会在页面内容加载完成后立即被触发;当有些事情我们希望页面加载完立即执行时,就可以使用该事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            document.getElementsByTagName("p")[0].style.color='red'
        }
    </script>
</head>
<body>

<p>您好</p>

</body>
</html>

正常情况下,JS代码上html标签之前的话,JS是找不到相应的标签的;将JS代码放在onload事件函数中后,会在页面全部加载完成后执行,就可以找到相应的html标签进行相关操作了。

2、onsubmit

onsubmit事件是在提交表单时触发,该事件只能给form元素使用。应用场景:在表单提交前验证用户输入是否正确,如果验证失败,在该方法中我们应该阻止表单的提交。

阻止默认事件有两种方式:一种是return false、另一种是e.preventDefault()

需求:验证用户输入的用户名长度必须大于5,小于20;不符合要求就阻止表单提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .hint{
            color: red;
            font-size: 12px;
            margin-left: 5px;
        }
    </style>
</head>
<body>

<form action="" id="form">
    <p id="p">username: <input type="text" name="user"><span class="hint hide">用户名长度必须是大于5位,小于20位</span></p>
    <input type="submit">
</form>

<script>
    var form=document.getElementById("form");
    var span=document.getElementsByClassName("hide")[0];
    form.onsubmit=function (e) {
        var username=document.getElementsByName('user')[0].value;
        if (username.length<5 || username>20){
            span.classList.remove("hide");
//            return false  //阻止默认事件方式一
            e.preventDefault()    //阻止默认事件方式二
        }else {
            span.classList.add("hide");
            alert("合法输入")
        }
    }
</script>
</body>
</html>

注意:在使用第二种阻止默认事件方式时,必须给绑定的函数传一个参数,这个参数是默认的event对象。这个event对象中封装了该事件的一些相关属性。

3、onselect

用户选取文本时触发 ( 仅限于input 标签和 textarea标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<script>
    var ele=document.getElementsByTagName("input")[0];
    ele.onselect=function(){
          alert(123);
    }
</script>
</body>
</html>
img_45f1d7064632e6092a62434660c653c4.png
Paste_Image.png

如上图,选中input中的文本时,会弹出123.

4、onchange

该事件在表单元素的内容改变时触发( input, keygen, select, 和 textarea标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="">
    <option value="">111</option>
    <option value="">222</option>
    <option value="">333</option>
</select>

<input type="text" value="求改变我吧">
<script>
    var ele=document.getElementsByTagName("select")[0];
    var input=document.getElementsByTagName("input")[0];
    ele.onchange=function(){
        alert(123);
    };

    input.onchange=function () {
        alert("已经改变了")
    }
</script>

</body>
</html>

5、onkeydown

Event 对象:Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用,函数不会在事件发生前被执行!event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了,需要问下event对象的属性,这里就时KeyCode.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="t1"/>
<script type="text/javascript">
    var ele=document.getElementById("t1");
    ele.onkeydown=function(e){
        e=e||window.event;
        var keynum=e.keyCode;
        var keychar=String.fromCharCode(keynum);  //将键盘对应按键的ASCII码转换为当前按键对应的字母
        alert(keynum+'----->'+keychar);
    };
</script>
</body>
</html>

6、onmousemove、onmouseleave、onmouseout

onmousemove 事件在鼠标移动到 div 元素上时触发。
onmouseleave 事件只在鼠标指针移出 div 元素时触发。
onmouseout 事件在鼠标指针移出 div 元素及离开子元素时触发。

实例练习:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}
p {
    background-color: white;
}
</style>
</head>
<body>

<h3>以下实例演示了 onmousemove, onmouseleave 和 onmouseout 的区别。</h3>
<p> onmousemove 事件在鼠标移动到 div 元素上时触发。</p>
<p> mouseleave 事件只在鼠标指针移出 div 元素时触发。 </p>
<p> onmouseout 事件在鼠标指针移出 div 元素及离开子元素(p 和 span)时触发。</p>
<div onmousemove="myMoveFunction()">
  <p>onmousemove: <br> <span id="demo">鼠标移入和移出!</span></p>
</div>
<div onmouseleave="myLeaveFunction()">
  <p>onmouseleave: <br> <span id="demo2">鼠标移入和移出!</span></p>
</div>
<div onmouseout="myOutFunction()">
  <p>onmouseout: <br> <span id="demo3">鼠标移入和移出!</span></p>
</div>
<script>
x = 0;
y = 0;
z = 0;
function myMoveFunction() {
    document.getElementById("demo").innerHTML = z+=1;
}
function myLeaveFunction() {
    document.getElementById("demo2").innerHTML = x+=1;
}
function myOutFunction() {
    document.getElementById("demo3").innerHTML = y+=1;
}
</script>

</body>
</html>

7、事件传播

<div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
        <div id="abc_2" style="border:1px solid red;width:200px;height:200px;">

        </div>
</div>

<script type="text/javascript">
        document.getElementById("abc_1").onclick=function(){
            alert('111');
        };
        document.getElementById("abc_2").onclick=function(event){
            alert('222');
        }
</script>

以上代码,div#abc_1是div#abc_2的父元素,两者分别都绑定了点击事件,当点击div#abc_2时,将会先触发alert("222")执行,再触发alert("111")执行。这就是事件传播。要想避免这种问题,就需要用事件对象eventstopPropagation()访求。

代码修改如下,给事件函数传一个event参数,再调用event.stopPropagation()方法。

<div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
        <div id="abc_2" style="border:1px solid red;width:200px;height:200px;">

        </div>
</div>

<script type="text/javascript">
        document.getElementById("abc_1").onclick=function(){
            alert('111');
        };
        document.getElementById("abc_2").onclick=function(event){
            alert('222');
            event.stopPropagation(); //阻止事件向外层div传播.
        }
</script>

再次点击子元素div#abc_2就不会再触发父元素div#abc_1的事件函数执行了。

8、实例练习

8.1 select移动

将左边的框中选中的对象移动右边的框中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            margin: 0 auto;
            background-color: darkgray;
            width: 80%;
            height: 600px;
            margin-top: 30px;
            word-spacing: -5px;
        }
        #left{
            display: inline-block;
            width: 100px ;
            height: 140px;
            background-color: wheat;
            text-align: center;
        }
        #choice{
            display: inline-block;
            height: 140px;
            background-color: darkolivegreen;
            vertical-align: top;
            padding:0 5px;
        }
        #choice button{
            margin-top: 20px;
        }
        #right{
            display: inline-block;
            width: 100px ;
            height: 140px;
            background-color: wheat;
            text-align: center;
            line-height: 140px;

        }
    </style>
</head>
<body>

<div class="outer">

    <select multiple="multiple" size="5" id="left">
        <option>红楼梦</option>
        <option>西游记</option>
        <option>水浒传</option>
        <option>JinPingMei</option>
        <option>三国演义</option>
    </select>

    <span id="choice">
        <button id="choose_move"> > </button><br>
        <button id="all_move"> >> </button>
    </span>

    <select multiple="multiple" size="10" id="right">
        <option>放风筝的人</option>
    </select>

</div>
<script>
    var choose_move=document.getElementById("choose_move");
    var all_move=document.getElementById("all_move");

    var right=document.getElementById("right");
    var left=document.getElementById("left");
    var options=left.options;
    
    choose_move.onclick=function(){
        for (var i=0; i<options.length;i++){
             var option=options[i];
             if(option.selected==true){
                   right.appendChild(option);
                   i--;
             }
         }
    };

    all_move.onclick=function(){

        for (var i=0; i<options.length;i++){
             var option=options[i];
               right.appendChild(option);
               i--;
         }
    };
    
</script>
</body>
</html>

8.2 二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="province">
    <option>请选择省:</option>
</select>

<select id="city">
    <option>请选择市:</option>
</select>

<script>
    data={"河北省":["廊坊","邯郸"],"北京":["朝阳区","海淀区"]};
    var p=document.getElementById("province");
    var c=document.getElementById("city");

    for(var i in data){
        var option_pro=document.createElement("option");
        option_pro.innerHTML=i;
        p.appendChild(option_pro);
    }
    p.onchange=function(){
        pro=(this.options[this.selectedIndex]).innerHTML;
        citys=data[pro];
        c.options.length=0;

        for (var j in citys){
            var option_city=document.createElement("option");
            option_city.innerHTML=citys[j];
            c.appendChild(option_city);
        }
    }
</script>

</body>
</html>

8.3 实现表格的正反选及全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button>全选</button>
<button>反选</button>
<button>取消</button>
<hr>
<table border="1">
    <tr>
        <th>   </th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>alex</td>
        <td>29</td>
        <td>男</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>yuan</td>
        <td>20</td>
        <td>女</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>egon</td>
        <td>30</td>
        <td>男</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>seven</td>
        <td>23</td>
        <td>男</td>
    </tr>
</table>

<script>
    var ele_buttons=document.getElementsByTagName('button');
    var ele_inps=document.getElementsByTagName('input');
    for (var i=0;i<ele_buttons.length;i++){
        ele_buttons[i].onclick=function () {
            switch (this.innerHTML) {
                case '全选':
                    for (var j=0;j<ele_inps.length;j++){
                        ele_inps[j].checked=true;
                    }break;
                case '取消':
                    for (var j=0;j<ele_inps.length;j++){
                        ele_inps[j].checked=false;
                    }break;
                case '反选':
                    for (var j=0;j<ele_inps.length;j++){
                        if (ele_inps[j].checked){
                            ele_inps[j].checked=false;
                        }
                        else {
                           ele_inps[j].checked=true;
                        }
                    }break;
            }
        }
    }
</script>
</body>
</html>

8.4 搜索框实现

需要用到以下两个事件:

  • onblur 元素失去焦点时触发
  • onfocus 元素获取焦点时触发
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function Focus(){
            var input=document.getElementById("ID1");
            if (input.value=="请输入用户名"){
                input.value="";
            }
        }
        
        function Blurs(){
            var ele=document.getElementById("ID1");
            var val=ele.value;
            if(!val.trim()){
                ele.value="请输入用户名";
            }
        }
    </script>
</head>
<body>
    <input id="ID1" type="text" value="请输入用户名" onblur="Blurs()" onfocus="Focus()">
</body>
</html>

8.5 跑马灯及tab切换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tab</title>
  <style>
    *{margin:0; padding:0; list-style:none;}
    body{
        font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif;
    }
    h3{
        text-align: center;
        color:darkcyan;
        margin-top: 30px;
        letter-spacing: 5px;
    }
    .box{
      width: 1000px;
      margin:50px auto 0px;
    }
    #title{
      line-height: 40px;
      background-color: rgb(247,247,247);
      font-size: 16px;
      font-weight: bold;
      color: rgb(102,102,102);
    }
    #title span{
      float: left;
      width: 166px;
      text-align: center;
    }
    #title span:hover{
      /*color: black;*/
      cursor: pointer;
    }
    #content{
      margin-top: 20px;
    }
    #content li{
      width: 1050px;
      display: none;
      background-color: rgb(247,247,247);
    }
    #content li div{
      width: 156px;
      margin-right: 14px;
      float: left;
      text-align: center;
    }
    #content li div a{
      font-size: 14px;
      color: black;
      line-height: 14px;
    /*  float: left;*/
    display: inline-block;
      margin-top: 10px;
    }
    #content li a:hover{
      color: #B70606;
    }
    #content li div span{
        font-size: 16px;
        line-height: 16px;
        /*float: left;*/
        display: block;
        color: rgb(102,102,102);
        margin-top: 10px;
      }
    #content img{
      float: left;
      width: 155px;
      height: 250px;
    }
    #title .select{
      background-color: #2459a2;
      color: white;
        border-radius: 10%;
    }
    #content .show{
      display: block;
    }

    .show span{
        color: red!important;
        font-size: 30px;
    }
  </style>
</head>

<body>
    <h3 id="wel">京东商城欢迎您</h3>
    <!--  direction="right up down left" -->
<!--  behavior:滚动方式(包括3个值:scroll、slide、alternate) -->
<!--  说明:scroll:循环滚动,默认效果;slide:只滚动一次就停止;alternate:来回交替进行滚动。 -->
<!--  scrollamount="5" 滚动速度 -->

<marquee behavior="alternate" direction="right">欢迎您苑昊先生</marquee>
    <script>

    function test(){

        var mywel = document.getElementById("wel");
        var content = mywel.innerText;

        var f_content = content.charAt(0);
        var l_content = content.substring(1,content.length);

        var new_content = l_content + f_content;
        mywel.innerText = new_content;

    }

    // setInterval("test();", 500);
</script>
    <div class="box">
      <p id="title">
        <span class="select">家用电器</span>
        <span>家具</span>
        <span>汽车</span>
        <span>食品</span>
        <span>女鞋</span>
        <span>医疗保健</span>
      </p>

      <ul id="content">
        <li class="show">

          <div>![冰箱](http://upload-images.jianshu.io/upload_images/5431215-d24ca5445b11a965.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">容声(Ronshen)冰箱</a><span>价格:5600</span></div>
          <div>![洗衣机](http://upload-images.jianshu.io/upload_images/5431215-3645e1e102705e92.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">海尔洗衣机</a><span>价格:5400</span></div>
          <div>![电饭煲](http://upload-images.jianshu.io/upload_images/5431215-eae72e8a9fc11885.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">福库(CUCKOO)电饭煲</a><span>价格:3999</span></div>
          <div>![智能电视](http://upload-images.jianshu.io/upload_images/5431215-9586355186d50d08.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">三星智能电视</a><span>价格:8999</span></div>
          <div>![净水器](http://upload-images.jianshu.io/upload_images/5431215-a345741003f8553e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">净水器</a><span>价格:1300</span></div>
          <div>![空气净化器](http://upload-images.jianshu.io/upload_images/5431215-a14ed5f4be943c2a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">空气净化器</a><span>价格:5300</span></div>
        </li>

        <li>

          <div>![沙发](http://upload-images.jianshu.io/upload_images/5431215-8a60dadbb0292c9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">沙发</a><span>价格:2900</span></div>
          <div>![沙发](http://upload-images.jianshu.io/upload_images/5431215-8a60dadbb0292c9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">沙发</a><span>价格:2900</span></div>
          <div>![沙发](http://upload-images.jianshu.io/upload_images/5431215-8a60dadbb0292c9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">沙发</a><span>价格:2900</span></div>
          <div>![沙发](http://upload-images.jianshu.io/upload_images/5431215-8a60dadbb0292c9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">沙发</a><span>价格:2900</span></div>
          <div>![沙发](http://upload-images.jianshu.io/upload_images/5431215-8a60dadbb0292c9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">沙发</a><span>价格:2900</span></div>
          <div>![沙发](http://upload-images.jianshu.io/upload_images/5431215-8a60dadbb0292c9b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">沙发</a><span>价格:2900</span></div>

        </li>
        <li>
          <div>![长安汽车](http://upload-images.jianshu.io/upload_images/5431215-d8b79d6d22e4ab89.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">长安汽车</a><span>价格:12900</span></div>
          <div>![长安汽车](http://upload-images.jianshu.io/upload_images/5431215-d8b79d6d22e4ab89.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">长安汽车</a><span>价格:12900</span></div>
          <div>![长安汽车](http://upload-images.jianshu.io/upload_images/5431215-d8b79d6d22e4ab89.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">长安汽车</a><span>价格:12900</span></div>
          <div>![长安汽车](http://upload-images.jianshu.io/upload_images/5431215-d8b79d6d22e4ab89.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">长安汽车</a><span>价格:12900</span></div>
          <div>![长安汽车](http://upload-images.jianshu.io/upload_images/5431215-d8b79d6d22e4ab89.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">长安汽车</a><span>价格:12900</span></div>
          <div>![长安汽车](http://upload-images.jianshu.io/upload_images/5431215-d8b79d6d22e4ab89.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">长安汽车</a><span>价格:12900</span></div>
        </li>
        <li>

          <div>![嘉兴粽子](http://upload-images.jianshu.io/upload_images/5431215-7823eaf77dc3393c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">嘉兴粽子</a><span>价格:1</span></div>
          <div>![嘉兴粽子](http://upload-images.jianshu.io/upload_images/5431215-7823eaf77dc3393c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">嘉兴粽子</a><span>价格:1</span></div>
          <div>![嘉兴粽子](http://upload-images.jianshu.io/upload_images/5431215-7823eaf77dc3393c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">嘉兴粽子</a><span>价格:1</span></div>
          <div>![嘉兴粽子](http://upload-images.jianshu.io/upload_images/5431215-7823eaf77dc3393c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">嘉兴粽子</a><span>价格:1</span></div>
          <div>![嘉兴粽子](http://upload-images.jianshu.io/upload_images/5431215-7823eaf77dc3393c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">嘉兴粽子</a><span>价格:1</span></div>
          <div>![嘉兴粽子](http://upload-images.jianshu.io/upload_images/5431215-7823eaf77dc3393c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">嘉兴粽子</a><span>价格:1</span></div>

        </li>
        <li>

          <div>![星期六](http://upload-images.jianshu.io/upload_images/5431215-850b283a1051a92c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">星期六</a><span>价格:439</span></div>
          <div>![星期六](http://upload-images.jianshu.io/upload_images/5431215-850b283a1051a92c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">星期六</a><span>价格:439</span></div>
          <div>![星期六](http://upload-images.jianshu.io/upload_images/5431215-850b283a1051a92c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">星期六</a><span>价格:439</span></div>
          <div>![星期六](http://upload-images.jianshu.io/upload_images/5431215-850b283a1051a92c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">星期六</a><span>价格:439</span></div>
          <div>![星期六](http://upload-images.jianshu.io/upload_images/5431215-850b283a1051a92c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">星期六</a><span>价格:439</span></div>
          <div>![星期六](http://upload-images.jianshu.io/upload_images/5431215-850b283a1051a92c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">星期六</a><span>价格:439</span></div>

        </li>
        <li>

          <div>![汇仁 肾宝片](http://upload-images.jianshu.io/upload_images/5431215-02b14b04fd105732.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
          <div>![汇仁 肾宝片](http://upload-images.jianshu.io/upload_images/5431215-02b14b04fd105732.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
          <div>![汇仁 肾宝片](http://upload-images.jianshu.io/upload_images/5431215-02b14b04fd105732.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
          <div>![汇仁 肾宝片](http://upload-images.jianshu.io/upload_images/5431215-02b14b04fd105732.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
          <div>![汇仁 肾宝片](http://upload-images.jianshu.io/upload_images/5431215-02b14b04fd105732.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
          <div>![汇仁 肾宝片](http://upload-images.jianshu.io/upload_images/5431215-02b14b04fd105732.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="#">汇仁 肾宝片</a><span>价格:322</span></div>

        </li>


      </ul>
    </div>

    <script>
      var title=document.getElementById('title');
      var content=document.getElementById('content');
      var category=title.getElementsByTagName('span');
      var item=content.getElementsByTagName('li');

      for (var i = 0; i < category.length; i++) {

          category[i].index=i;

          category[i].onclick=function(){

            for (var j = 0; j < category.length; j++) {
              category[j].className='';
              item[j].className='';
            }
            this.className='select';
            item[this.index].className='show';
          }
      }

    </script>
</body>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
65
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载