JavaScript当当网我的订单切换我的团购订单动态切换效果

最新推荐文章于 2022-10-17 16:41:24 发布

刘欢(C#)

最新推荐文章于 2022-10-17 16:41:24 发布

阅读量996

点赞数

本文链接：https://blog.csdn.net/qq_36074218/article/details/70809406

版权

<!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>