//下拉菜单效果和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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>当当网我的订单页</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-size: 12px;
} a {
color: #;
text-decoration: none;
} body {
background: #fff url(images/dangbg.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 () {
var $ul = $("#menu-ul")
$("#menu:first").hover(function () {
$ul.show();
}, function () {
$ul.hide();
})
$("#tab-top ul :last").click(function () {
$(this).addClass("on").siblings().removeClass("on");
$(".content:eq(0)").hide();
$(".content:eq(1)").show();
})
$("#tab-top ul :first").click(function () {
$(this).addClass("on").siblings().removeClass("on");
$(".content:eq(0)").show();
$(".content:eq(1)").hide();
})
})
</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="data:images/order.jpg"/></div>
<div class="content" style="display:none;"><img src="data:images/tuan.jpg"/></div>
</div>
</body>
</html>