First of all, let's have an effect picture:
Secondly, summarize the following points to be noted:
- The whole code needs to be written in the window.onload event, because the html element can only be obtained after the page is loaded, otherwise an error will be reported;
- After the event is registered, the index of lis[i] and traversal array cannot be obtained in it. All event functions can only use this or event source event.target;
- Because of reason 2, all the indexes of the menu need to be saved, and then the indexes are taken out after the event registration;
- tabIndex is a built-in attribute of an object. The default value is - 1, which means index;
- When all current styles are removed, variables can only be changed again in onmouseover event function;
- If the js code is written before the body, you need to download all the code in the window.onload time; if the js code is written after the body, you don't need to
Finally, on the complete code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Slide menu</title>
<style type="text/css">
#outbox{
width: 500px;
margin: 0 auto;
background: #eee;
box-sizing: border-box;
padding: 10px 25px;
}
ul,li{
list-style: none;
padding: 0px;
margin: 0px;
}
li{
float: left;
width: 150px;
height: 30px;
line-height: 30px;
text-align: center;
background: #bbb;
color: white;
}
.liActive{
background: white;
color: red;
}
.con{
height: 100px;
margin-top: 15px;
text-align: center;
}
</style>
<script type="text/javascript">
//After the page is loaded, you can get the html element, otherwise an error will be reported
window.onload = function (){
var lis = document.getElementById("title").getElementsByTagName("li");
var cons = document.getElementById("content").getElementsByClassName("con");
//Mouse over onmouseover
//Batch registration event
for (var i = 0; i < lis.length; i++) {
var currentLi = lis[i];
//First, save the index of the menu, and then retrieve the index after the event registration
//tabIndex is a built-in property of an object. The default value is - 1, indicating the index
currentLi.tabIndex = i;
//1. whoever moves to the top will be displayed as current class="current"
//Remove all current styles. You can only clear them in onmouseover event
lis[i].onmouseover = function (){
for (var j = 0; j < lis.length; j++) {
lis[j].className = '';
cons[j].style.display = 'none';
}
//Keep the current move up style, only this can be used, no lis[i] and traversal array index can be found in the event registration
this.className = 'liActive';
cons[this.tabIndex].style.display = 'block';
}
}
}
</script>
</head>
<body>
<div id="outbox">
<ul id="title">
<li class="liActive">north Beijing</li>
<li>upper sea</li>
<li>deep Zhen</li>
</ul>
<div style="clear: both;"></div>
<div id="content">
<div class="con" style="background: #fcc;">
//Content 111
</div>
<div class="con" style="background: #cfc;display: none;">
//Content 222
</div>
<div class="con" style="background: #ccf;display: none;">
//Content 333
</div>
</div>
</div>
</body>
</html>
The article is only a record of my learning process, for reference only. If you have any questions, please point out!