练习jQuery 。table切换

练习

<p>我的订单页</p>
<script type="text/javascript" src="/admin/blogs/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	 /*  $(function(){
	 	//下拉菜单
		$("#menu").hover(
		function(){
			$(this).css("border","1px solid #EE7304");
			$("#menu-ul").show();
			},
		function(){
			$(this).css("border","none");
			$("#menu-ul").hide();
		}); */
		//TAB内容切换
		/* $("#tab-top ul li").click(function(){
			$(this).addClass("on");
			$(this).siblings("li").removeClass("on");
			//对于的div内容切换
			$("div.content").hide();
			$("div.content").eq($(this).index()).show(1800);
		}); */
	 $(document).ready(function(){
	 	$("#menu").mouseover(function(){
	 		$(this).css("border","1px solid #EE7304");
	 		$("#menu-ul").css("display","block");
	 	}).mouseout(function(){
	 		$(this).css("border","none");
	 		$("#menu-ul").css("display","none");
	 	});
	 	$("#tab-top li").each(
	 		function(index,e){
		 		var $li = $(e);
		 		$li.click(function(){
		 			$li.addClass("on");
		 			$li.siblings().removeClass("on");
		 			$(".content").css("display","none");
		 			$(".content :eq("+index+")").css("display","block");
		 		});
	 		}
	 	);
	 });
</script>
<!-- 下拉菜单 -->
<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">我的订单我的订单我的订单我的订单我的订单我的订单我的订单我的订单我的订单我的订单我的订单我的订单我的订单我的订单我的订单我的订单我的订单我的订单</div>
<div class="content" style="display: none;">
我的团购订单我的团购订单我的团购订单我的团购订单我的团购订单我的团购订单我的团购订单我的团购订单
/div>
</div>