One thing you need to pay special attention to here is to set a delay for the mouseover event of the label, so as to prevent the user from maliciously moving the mouse, causing a large number of requests and causing the server to crash. The setTimeout function is used, mainly for the downloaded events
1 $().each(function(){}) This is a very important way to traverse all tags
2 mouseover event,
and the key css style Write and control the displayed style,
tab < link rel="stylesheet" type="text/css" href="css/tab.css">
- Tag1
- Tag2
< ;/div> 🎜>
Copy code
The code is as follows:
ul ,li { margin:0px;
padding: 0px;
height:20px;
color:white;
}
.listli { background-color: #663333;
border:1px solid #663333;
}
div { clear:left;
width:300px;
height:100px;
background-color: #663333;
border-top:0px;
color:white;
display:none;
}
.divarea { display:block; }
The next step is to write js to control sliding
Copy the code
The code is as follows:
// Define global variables
var timeout;
$("div.divarea").removeClass("divarea");
$("li.listli").removeClass("listli");
// $( "div").eq(index).addClass("divarea"); //Another way to write it is:$(div:eq(index)).addClass("divarea");
$("div: eq(" index ")").addClass("divarea");
$("li").eq(index).addClass("listli");
},
320);
$(this).mouseout(function(){
clearTimeout(timeout);
});
});
});
});
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
