<!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" />
<title>当当网我的订单页</title>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js" ></script>
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:12px;
}h\
a{
color:#999;
text-decoration:none;
}
body{
background:#fff url(images/bg.jpg) no-repeat;
}
ul{
list-style:none;
}
.pos{
position:absolute;
}
#menu{
left:931px;
top:5px;
}
#menu li{
display:block;
height:20px;
line-height:20px;
background-color:#fff;
padding:4px;
}
#tabs{
left:222px;
top:237px
}
#tab-top{
height:30px;
line-height:30px;
padding-left:20px;
border-bottom:1px solid #15B69A;
}
#tab-top ul li{
display:block;
float:left;
padding:0px 15px;
border:1px solid #C6C5C5;
border-bottom:1px solid #15B69A;
background-color:#F0F0F0;
margin-right:10px;
margin-top:-1px;
cursor:pointer;
}
#tab-top ul li.on{
border:1px solid #15B69A;
border-top:2px solid #15B69A;
border-bottom:none;
background-color:#F0FCF1;
}
</style>
<script type="text/javascript">
$(function () {
$("#menu").hover(
function () {
$("#menu").css("border", "1px solid #EE7304");
$("#menu-ul").show();
},
function () {
$("#menu").css("border", "none");
$("#menu-ul").hide();
}
);
$("#tab-top ul li").click(function () {
$(this).addClass("on");
$(this).siblings("li").removeClass("on");
$("div.content").hide();
$("div.content").eq($(this).index()).show(1800);
});
});
</script>
</head>
<body>
<!-- 下拉菜单 -->
<div id="menu" class="pos">
<a href="#">我的当当</a>
<ul id="menu-ul" style="display:none;">
<li><a href="#">我的订单</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">我的礼品卡</a></li>
<li><a href="#">我的积分</a></li>
<li><a href="#">我的余额</a></li>
</ul>
</div>
<!-- tabs -->
<div id="tabs" class="pos">
<div id="tab-top">
<ul>
<li class="on">我的订单</li>
<li>我的团购订单</li>
</ul>
</div>
<div class="content" >
<img src="images/order.jpg" />
</div>
<div class="content" style="display:none;">
<img src="images/tuan.jpg" />
</div>
</div>
</body>
</html>