一级菜单

最新推荐文章于 2022-05-17 11:14:38 发布

sammyfunyupg

最新推荐文章于 2022-05-17 11:14:38 发布

阅读量147

点赞数

文章标签： CSS XHTML

本文链接：https://blog.csdn.net/sammyfunyupg/article/details/83949328

版权

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<style type="text/css">
#slideTab{width:202px;margin:0; padding:0; position:relative;}
#tabHeader{width:200px;height:30px; float:left; margin:0; padding:0; border:0px solid #999;}
#tabHeader span{width:6px;height:16px;float:left;padding:7px 0;margin:0;background:#999;color:#FFFFFF;font:700 12px Verdana; cursor:pointer; overflow:hidden;}
#tabHeader div{margin:0; padding:0;width:188px;height:30px;float:left; overflow:hidden;position:relative;}
#tabArea{margin:0; padding:0;height:30px;width:312px;left:0; top:0; position:absolute; z-index:2;}
#tabArea li{border:1px solid #999;margin:0; padding:4px 0; text-align:center;float:left;width:50px;height:20px; list-style:none;font:700 12px Verdana; background:#CCC; cursor:pointer;}
#Tab2, #Tab3, #Tab4, #Tab5, #Tab6{*position:absolute;*top:45px;left:0;top:30px;width:198px; height:200px;border-left:1px solid #999;border-right:1px solid #999;border-bottom:1px solid #999;font:700 30px Arial, Helvetica, sans-serif; text-align:center; display:none;float:left;}
#Tab1{width:198px; height:200px;border-left:1px solid #999;border-right:1px solid #999;border-bottom:1px solid #999;float:left;font:700 30px Arial, Helvetica, sans-serif; text-align:center; }
</style>
<title>Hello,Yang!</title>
<script type="text/javascript">
$(document).ready(function(){
$("#leftTab").mouseover(function(){
$("#tabArea").animate({"left":"0"},1000);
});

$("#leftTab").mouseout(function(){
$("#tabArea").stop();
});

$("#rightTab").mouseover(function(){
$("#tabArea").animate({"left":"-123px"},1000);
});

$("#rightTab").mouseout(function(){
$("#tabArea").stop();
});
$("#tabArea li:first").mouseover(function(){
$("#tabArea li:gt(0)").css({"background-color":"#CCC","border-bottom":"1px solid #999"});
$(this).css({"background-color":"#fff","border-bottom":"1px solid #fff"});
$("#Tab2,#Tab3,#Tab4,#Tab5,#Tab6").hide();$("#Tab1").show();
});

$("#tabArea li:eq(1)").mouseover(function(){
$("#tabArea li:gt(1),#tabArea li:lt(1)").css({"background-color":"#CCC","border-bottom":"1px solid #999"});
$(this).css({"background-color":"#fff","border-bottom":"1px solid #fff"});
$("#Tab1,#Tab3,#Tab4,#Tab5,#Tab6").hide();$("#Tab2").show();
});

$("#tabArea li:eq(2)").mouseover(function(){
$("#tabArea li:gt(2),#tabArea li:lt(2)").css({"background-color":"#CCC","border-bottom":"1px solid #999"});
$(this).css({"background-color":"#fff","border-bottom":"1px solid #fff"});
$("#Tab3").show();$("#Tab1,#Tab2,#Tab4,#Tab5,#Tab6").hide();
});

$("#tabArea li:eq(3)").mouseover(function(){
$("#tabArea li:gt(3),#tabArea li:lt(3)").css({"background-color":"#CCC","border-bottom":"1px solid #999"});
$(this).css({"background-color":"#fff","border-bottom":"1px solid #fff"});
$("#Tab4").show();$("#Tab1,#Tab2,#Tab3,#Tab5,#Tab6").hide();
});

$("#tabArea li:eq(4)").mouseover(function(){
$("#tabArea li:gt(4),#tabArea li:lt(4)").css({"background-color":"#CCC","border-bottom":"1px solid #999"});
$(this).css({"background-color":"#fff","border-bottom":"1px solid #fff"});
$("#Tab5").show();$("#Tab1,#Tab2,#Tab3,#Tab4,#Tab6").hide();
});
$("#tabArea li:eq(5)").mouseover(function(){
$("#tabArea li:lt(5)").css({"background-color":"#CCC","border-bottom":"1px solid #999"});
$(this).css({"background-color":"#fff","border-bottom":"1px solid #fff"});
$("#Tab6").show();$("#Tab1,#Tab2,#Tab3,#Tab4,#Tab5").hide();
});

});
</script>
</head>
<body>
<div id="slideTab">
<div id="tabHeader">
<span id="leftTab">‹</span>
<div>
<ul id="tabArea">
<li style="background:#FFFFFF; border-bottom:1px solid #fff;">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
<li>Tab6</li>
</ul>
</div>
<span id="rightTab">›</span>
</div>
<div id="Tab1">Tab1</div>
<div id="Tab2">Tab2</div>
<div id="Tab3">Tab3</div>
<div id="Tab4">Tab4</div>
<div id="Tab5">Tab5</div>
<div id="Tab6">Tab6</div>
</div>
</body>
</html>