//下拉菜单效果和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: #999; 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(1000); }) $("#tab-top ul :first").click(function () { $(this).addClass("on").siblings().removeClass("on"); $(".content:eq(0)").show(1000); $(".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="images/order.jpg"/></div> <div class="content" style="display:none;"><img src="images/tuan.jpg"/></div> </div> </body> </html>