当当网小型悬浮

最新推荐文章于 2025-04-23 20:29:15 发布

火火儿

最新推荐文章于 2025-04-23 20:29:15 发布

阅读量248

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_36024620/article/details/70809519

版权

<!DOCTYPE html>
<html>
  <head>
    <title>s5.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script></head>
<style type="text/css" >
  *{
	  margin:0px;
	  padding:0px;
	  font-size:12px;
  }
  a{
	color:#999;
	text-decoration:none;
  }
  body{
	  background:#fff url(img/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(){
			$("a").bind({
			mouseover : function() {
				$("#menu-ul").show();
			},
			mouseout : function() {
				$("#menu-ul").hide();
			}
		});
		$("#tab-top ul li").click(function() {
			$(".on").removeClass("on");
			$(this).fadeIn("slow").addClass("on");
			$("div .content").hide();
			$("div .content").eq($(this).index()).show();
		});
	});
		
		
		
		
	//});
</script>
<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="img/order.jpg" />
    </div>
    <div  class="content" style="display:none;">
    	<img src="img/tuan.jpg" />
    </div>
 </div>
</body>

</html>