You can save the following code as JS. File
Defining Global Variables
var timeout;
$ (document). Ready (function () {
Find all the LI tags
$ ("Li"). each (function (index) {
$ (this). MouseOver (function () {
Sliding doors have to set a delay time to avoid the user crazy mobile mouse, causing the server to crash, this is very important
Timeout =settimeout (function () {
$ ("Div.divarea"). Removeclass ("Divarea");
$ ("Li.listli"). Removeclass ("Listli");
$ ("div"). EQ (index). addclass ("Divarea"); Another type of writing is: $ (div:eq (index)). addclass ("Divarea");
$ ("Div:eq (" +index+ ")"). AddClass ("Divarea");
$ ("li"). EQ (index). addclass ("Listli");
},
320);
$ (this). Mouseout (function () {
Cleartimeout (timeout);
});
});
});
});
Front HTML code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<title>tab </TITLE>
<link rel= "stylesheet" type= "text/css Tutorial" href= "Css/tab.css" >
<script type= "Text/javascript tutorial" src= "Js/jquery-1.4.2.js" ></script>
<script type= "Text/javascript" src= "Js/tab.js" ></script>
</HEAD>
<BODY>
<ul id= "Ularea" >
<li class= "Listli" > Label 1</li>
<li > Label 2</li>
<li > Label 3</li>
</ul>
<div class= "Divarea" > Content 1</div>
<div> content 2</div>
<div> content 3</div>
</BODY>
</HTML>
Save this code as CSS code
UL, Li {margin:0px;
padding:0px;
List-style:none;
}
Li {float:left;
Background-color: #66CC00;
margin-right:2px; This is to set the spacing between the labels
padding:5px;
border:1px solid white;
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}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
