Day 15, Introduction to JavaScript Events

Keywords: Javascript less ascii

Catalog

1,onload
2,onsubmit
3,onselect
4,onchange
5,onkeydown
6,onmousemove,onmouseleave,onmouseout
 7. Event Dissemination
 8. Exercise by Example
    8.1 select Mobility
    8.2 Secondary Actions
    8.3 Realize positive and negative selection and full selection of tables
    8.4 Search Box Implementation
    8.5 Horse Lamp and tab Switching

W3Cschool Html DOM event object

1,onload

The onload event is triggered immediately after the page content is loaded; it can be used when something we want the page to load is executed immediately.

<!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>Hello!</p>

</body>
</html>

Normally, JS can't find the corresponding tag before html tag on JS code; after putting JS code in onload event function, it will be executed after all the pages are loaded, and the corresponding html tag can be found for relevant operation.

2,onsubmit

The onsubmit event is triggered when the form is submitted, and it can only be used by the form element. Application scenario: Verify that user input is correct before form submission, and if validation fails, we should prevent form submission in this method.

There are two ways to prevent default events: return false and e.preventDefault()

Requirements: Verify that the user's input username length must be greater than 5 and less than 20; prevent form submission if it does not meet the requirements.

<!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">User name length must be greater than 5 digits and less than 20 digits</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 // block default event mode 1
            e.preventDefault()    //Blocking default event mode 2
        }else {
            span.classList.add("hide");
            alert("Legal input")
        }
    }
</script>
</body>
</html>

Note: When using the second way to block default events, you must pass a parameter to the bound function, which is the default event object. This event object encapsulates some related properties of the event.

3,onselect

Triggered when the user selects text (limited to input tags and textarea tags)

<!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>
Paste_Image.png

As shown above, when you select the text in input, 123 pops up.

4,onchange

This event triggers when the content of the form element changes (input, keygen, select, and textarea tags)

<!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="Please change me.">
<script>
    var ele=document.getElementsByTagName("select")[0];
    var input=document.getElementsByTagName("input")[0];
    ele.onchange=function(){
        alert(123);
    };

    input.onchange=function () {
        alert("It has changed.")
    }
</script>

</body>
</html>

5,onkeydown

Event object: Event object represents the state of an event, such as the element in which the event occurs, the state of the keyboard keys, the position of the mouse, and the state of the mouse button.

Events are usually used in conjunction with functions, which are not executed before events occur! Event objects are created when an event occurs and passed to the event function when the event function is invoked. We just need to receive them. For example, onkeydown. We want to know which key is pressed. We need to ask about the properties of the event object. Here is 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);  //Converting the ASCII code of the keyboard key to the corresponding letter of the current key
        alert(keynum+'----->'+keychar);
    };
</script>
</body>
</html>

6,onmousemove,onmouseleave,onmouseout

The onmousemove event is triggered when the mouse moves over the div element.
onmouseleave events are triggered only when the mouse pointer moves out of the div element.
The onmouseout event is triggered when the mouse pointer moves out the div element and leaves the child element.

Example exercises:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool Course(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>The following example demonstrates this onmousemove, onmouseleave and onmouseout The difference.</h3>
<p> onmousemove Events move to the mouse div The element is triggered from time to time.</p>
<p> mouseleave Events are only moved out of the mouse pointer div The element is triggered. </p>
<p> onmouseout Events moved out of the mouse pointer div Elements and leaving child elements ( p and span)Time triggered.</p>
<div onmousemove="myMoveFunction()">
  <p>onmousemove: <br> <span id="demo">Mouse move in and out!</span></p>
</div>
<div onmouseleave="myLeaveFunction()">
  <p>onmouseleave: <br> <span id="demo2">Mouse move in and out!</span></p>
</div>
<div onmouseout="myOutFunction()">
  <p>onmouseout: <br> <span id="demo3">Mouse move in and out!</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. Event Dissemination

<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>

In the above code, div_ abc_1 is the parent element of div_ abc_2. Both of them bind click events. When you click div_ abc_2, alert("222") execution will be triggered first, and then alert("111") execution will be triggered. This is the spread of events. To avoid this problem, you need to use stopPropagation() of event object event.

The code is modified as follows, passing an event parameter to the event function and calling the event.stopPropagation() method.

<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(); //Prevent events from spreading to outer div s.
        }
</script>

Clicking on the child div abc_2 again will no longer trigger the event function of the parent div abc_1.

8. Exercise by Example

8.1 select Mobility

Move the selected object in the left box to the right box.

<!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>The Dream of Red Mansion</option>
        <option>Journey to the West</option>
        <option>Water Margin</option>
        <option>JinPingMei</option>
        <option>Romance of the Three Kingdoms</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>Kite Flyer</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 Secondary Actions

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="province">
    <option>Please choose Province:</option>
</select>

<select id="city">
    <option>Please select the city.:</option>
</select>

<script>
    data={"Hebei Province":["Langfang","Handan"],"Beijing":["Chaoyang District","Haidian District"]};
    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 Realize positive and negative selection and full selection of tables

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

<button>All election</button>
<button>Reverse election</button>
<button>cancel</button>
<hr>
<table border="1">
    <tr>
        <th>   </th>
        <th>Full name</th>
        <th>Age</th>
        <th>Gender</th>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>alex</td>
        <td>29</td>
        <td>male</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>yuan</td>
        <td>20</td>
        <td>female</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>egon</td>
        <td>30</td>
        <td>male</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>seven</td>
        <td>23</td>
        <td>male</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 'All election':
                    for (var j=0;j<ele_inps.length;j++){
                        ele_inps[j].checked=true;
                    }break;
                case 'cancel':
                    for (var j=0;j<ele_inps.length;j++){
                        ele_inps[j].checked=false;
                    }break;
                case 'Reverse election':
                    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 Search Box Implementation

The following two events need to be used:

  • Triggered when the onblur element loses focus
  • Triggered when onfocus element gets focus
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function Focus(){
            var input=document.getElementById("ID1");
            if (input.value=="enter one user name"){
                input.value="";
            }
        }
        
        function Blurs(){
            var ele=document.getElementById("ID1");
            var val=ele.value;
            if(!val.trim()){
                ele.value="enter one user name";
            }
        }
    </script>
</head>
<body>
    <input id="ID1" type="text" value="enter one user name" onblur="Blurs()" onfocus="Focus()">
</body>
</html>

8.5 Horse Lamp and tab Switching

<!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">Welcome to Jingdong Mall</h3>
    <!--  direction="right up down left" -->
<!--  behavior: Rolling mode(Including three values: scroll,slide,alternate) -->
<!--  Explain: scroll: Loop scroll, default effect; slide: Scroll once and stop. alternate: Roll back and forth alternately. -->
<!--  scrollamount="5" Rolling speed -->

<marquee behavior="alternate" direction="right">Welcome to Mr. Yuan Hao</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">Household Electric Appliances</span>
        <span>furniture</span>
        <span>automobile</span>
        <span>food</span>
        <span>Women's Shoes</span>
        <span>medical care</span>
      </p>

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

          <div>![Refrigerator](http://Upload-images.jianshu.io/upload_images/5431215-d24ca5445b11a965.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Ronshen) refrigerator </a> span> price: 5600</span> </div>
          <div>![Washing machine](http://Upload-images.jianshu.io/upload_images/5431215-3645e1e102705e92.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Haier washing machine</a><span> Price: 5400</span></div>
          <div>![Rice cooker](http://Upload-images.jianshu.io/upload_images/5431215-eae72e8a9fc11885.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="\">CUCKOO) cooker</a>span>price:3999</span></div>
          <div>![Smart TV](http://Upload-images.jianshu.io/upload_images/5431215-95865186d50d08.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Samsung Smart TV</a><span> Price: 8999</span></div>
          <div>![Water purifier](http://Upload-images.jianshu.io/upload_images/5431215-a345741003f8553e.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">water purifier</a>span>price:1300</span></div>
          <div>![Air cleaner](http://Upload-images.jianshu.io/upload_images/5431215-a14ed5f4be943c2a.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">air purifier</a>span>price:5300</span></div>
        </li>

        <li>

          <div>![Sofa](http://Upload-images.jianshu.io/upload_images/5431215-8a60dadbb0292c9b.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">sofa</a><span> Price: 2900</span> </div>
          <div>![Sofa](http://Upload-images.jianshu.io/upload_images/5431215-8a60dadbb0292c9b.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">sofa</a><span> Price: 2900</span> </div>
          <div>![Sofa](http://Upload-images.jianshu.io/upload_images/5431215-8a60dadbb0292c9b.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">sofa</a><span> Price: 2900</span> </div>
          <div>![Sofa](http://Upload-images.jianshu.io/upload_images/5431215-8a60dadbb0292c9b.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">sofa</a><span> Price: 2900</span> </div>
          <div>![Sofa](http://Upload-images.jianshu.io/upload_images/5431215-8a60dadbb0292c9b.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">sofa</a><span> Price: 2900</span> </div>
          <div>![Sofa](http://Upload-images.jianshu.io/upload_images/5431215-8a60dadbb0292c9b.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">sofa</a><span> Price: 2900</span> </div>

        </li>
        <li>
          <div>![Changan automobile](http://Upload-images.jianshu.io/upload_images/5431215-d8b79d6d22e4ab89.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Chang'an Automobile</a><span> Price: 12900</span> </div>
          <div>![Changan automobile](http://Upload-images.jianshu.io/upload_images/5431215-d8b79d6d22e4ab89.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Chang'an Automobile</a><span> Price: 12900</span> </div>
          <div>![Changan automobile](http://Upload-images.jianshu.io/upload_images/5431215-d8b79d6d22e4ab89.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Chang'an Automobile</a><span> Price: 12900</span> </div>
          <div>![Changan automobile](http://Upload-images.jianshu.io/upload_images/5431215-d8b79d6d22e4ab89.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Chang'an Automobile</a><span> Price: 12900</span> </div>
          <div>![Changan automobile](http://Upload-images.jianshu.io/upload_images/5431215-d8b79d6d22e4ab89.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Chang'an Automobile</a><span> Price: 12900</span> </div>
          <div>![Changan automobile](http://Upload-images.jianshu.io/upload_images/5431215-d8b79d6d22e4ab89.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Chang'an Automobile</a><span> Price: 12900</span> </div>
        </li>
        <li>

          <div>![Jiaxing dumplings](http://Upload-images.jianshu.io/upload_images/5431215-7823eaf77dc3393c.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Jiaxing Zongzi</a><span> Price: 1</span> </div>
          <div>![Jiaxing dumplings](http://Upload-images.jianshu.io/upload_images/5431215-7823eaf77dc3393c.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Jiaxing Zongzi</a><span> Price: 1</span> </div>
          <div>![Jiaxing dumplings](http://Upload-images.jianshu.io/upload_images/5431215-7823eaf77dc3393c.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Jiaxing Zongzi</a><span> Price: 1</span> </div>
          <div>![Jiaxing dumplings](http://Upload-images.jianshu.io/upload_images/5431215-7823eaf77dc3393c.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Jiaxing Zongzi</a><span> Price: 1</span> </div>
          <div>![Jiaxing dumplings](http://Upload-images.jianshu.io/upload_images/5431215-7823eaf77dc3393c.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Jiaxing Zongzi</a><span> Price: 1</span> </div>
          <div>![Jiaxing dumplings](http://Upload-images.jianshu.io/upload_images/5431215-7823eaf77dc3393c.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Jiaxing Zongzi</a><span> Price: 1</span> </div>

        </li>
        <li>

          <div>![Saturday](http://Upload-images.jianshu.io/upload_images/5431215-850b283a1051a92c.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Saturday</a><span> Price: 439</span> </div>
          <div>![Saturday](http://Upload-images.jianshu.io/upload_images/5431215-850b283a1051a92c.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Saturday</a><span> Price: 439</span> </div>
          <div>![Saturday](http://Upload-images.jianshu.io/upload_images/5431215-850b283a1051a92c.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Saturday</a><span> Price: 439</span> </div>
          <div>![Saturday](http://Upload-images.jianshu.io/upload_images/5431215-850b283a1051a92c.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Saturday</a><span> Price: 439</span> </div>
          <div>![Saturday](http://Upload-images.jianshu.io/upload_images/5431215-850b283a1051a92c.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Saturday</a><span> Price: 439</span> </div>
          <div>![Saturday](http://Upload-images.jianshu.io/upload_images/5431215-850b283a1051a92c.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Saturday</a><span> Price: 439</span> </div>

        </li>
        <li>

          <div>![Huiren Shenbao Tablets](http://Upload-images.jianshu.io/upload_images/5431215-02b14fd105732.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Huiren Kidney Tablets</a><span> Price: 322</span> </div>
          <div>![Huiren Shenbao Tablets](http://Upload-images.jianshu.io/upload_images/5431215-02b14fd105732.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Huiren Kidney Tablets</a><span> Price: 322</span> </div>
          <div>![Huiren Shenbao Tablets](http://Upload-images.jianshu.io/upload_images/5431215-02b14fd105732.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Huiren Kidney Tablets</a><span> Price: 322</span> </div>
          <div>![Huiren Shenbao Tablets](http://Upload-images.jianshu.io/upload_images/5431215-02b14fd105732.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Huiren Kidney Tablets</a><span> Price: 322</span> </div>
          <div>![Huiren Shenbao Tablets](http://Upload-images.jianshu.io/upload_images/5431215-02b14fd105732.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Huiren Kidney Tablets</a><span> Price: 322</span> </div>
          <div>![Huiren Shenbao Tablets](http://Upload-images.jianshu.io/upload_images/5431215-02b14fd105732.jpg?ImageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<a href="">Huiren Kidney Tablets</a><span> Price: 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>

Posted by PugJr on Fri, 25 Jan 2019 16:36:14 -0800

Hot Keywords

©2024 Programmer Group