模仿Jquery Tab
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
var TabMenu = function() {
var index = 0;
$("ul>li").each(function(i) {
var thisClass = $(this).attr("class");
$(this).mouseover(function() {
if (index != i) {
$("ul>li").removeClass("MouseOutStyle");
$(this).addClass("MouseoverStyle");
}
else {
$(this).addClass("ClickStyle");
}
}).mouseout(function() {
if (index != i) {
$("ul>li").removeClass("MouseoverStyle");
$(this).addClass("MouseOutStyle");
}
else {
$(this).addClass("ClickStyle");
}
}).click(function() {
$("ul>li").removeClass("MouseOutStyle");
$("ul>li").removeClass("MouseoverStyle");
$("ul>li").removeClass("ClickStyle");
$(this).addClass("ClickStyle");
index = i;
});
})
}
$(function() {
TabMenu();
});
</script>
<style type="text/css">
body
{
color: Black;
}
ul
{
list-style-type: none;
border: 0px;
height: 30px;
_height: 30px;
margin-left: 0px !important;
margin-top: 0px;
padding-left: 0px;
}
ul li
{
list-style-type: none;
float: left;
width: 134px;
height: 30px;
_height: 30px;
line-height: 30px;
background: url(blue.png);
background-position: 848px 122px;
margin-left: 1px;
text-align: center;
}
ul li:hover
{
cursor: pointer;
}
.ClickStyle
{
width: 134px;
height: 30px;
_height: 30px;
line-height: 30px;
background: url(blue.png);
background-position: 848px 61px;
margin-left: 1px;
text-align: center;
color: White;
}
.MouseoverStyle
{
width: 134px;
height: 30px;
_height: 30px;
line-height: 30px;
background: url(blue.png);
background-position: 848px 0px;
margin-left: 1px;
text-align: center;
color: White;
}
.MouseOutStyle
{
width: 134px;
height: 30px;
_height: 30px;
line-height: 30px;
background: url(blue.png);
background-position: 848px 122px;
margin-left: 1px;
text-align: center;
color: Black;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="float: left; width: 500px; border: 0px red solid;">
<div style="float: left; width: 100%; height: 30px; _height: 30px
border: 1px blue solid;">
<ul>
<li class="ClickStyle">menu1</li>
<li>menu1</li>
<li>menu1</li>
</ul>
</div>
<div style="float: left; width: 100%; height: 300px; border: 1px #818181 solid;">
</div>
</div>
</form>
</body>
</html>
