<title>My JSP 'shangji5.jsp' starting page</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;
}
a{
color:#999;
text-decoration:none;
}
body{
background:#fff url(sj5/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 a").hover(function(){
$("#menu-ul").toggle();
});
$("#tab-top ul li").click(function(){
$(".content").hide();
$(".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="sj5/order.jpg" />
</div>
<div class="content" style="display:none;">
<img src="sj5/tuan.jpg" />
</div>
</div>
</body>
</html>
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。制作fao列表隐藏
<title>My JSP 'shangji4.jsp' starting page</title>
<style type="text/css" >
.one{
width:600px;
font-size:12px;
}
.one .top{
background-color:#fff;
height:33px;
line-height:33px;
width:700px;
padding-left:28px;
color:#168750;
font-weight:bold;
margin-top:10px;
}
.iocn{
display:block;
width:14px;
height:14px;
background-image:url(sj4/+.jpg);
background-repeat:no-repeat;
float:left;
margin:10px 0px 0px 3px;
padding-right:10px;
}
.one span.jian{
background-image:url(sj4/-.jpg);
}
.one span.jia{
background-image:url(sj4/+.jpg);
}
.one div.bgreen{
background-image:url(sj4/bg.jpg);
}
div.content{
display:none;
padding:5px;
width:716px;
border:1px solid #D9EFED;
}
</style>
<script type="text/javascript">
$(function() {
$(".top").hover(function() {
$(this).addClass("bgreen");
},function(){
$(this).removeClass("bgreen");
});
$(".top").toggle(
function(){
$(this).find(".iocn").removeClass("jia").addClass('jian');
$(this).siblings(".content").show(1500);
},
function(){
$(this).find(".iocn").removeClass("jian").addClass('jia');
$(this).siblings(".content").hide('slow');
});
});
</script>
</head>
<body>
<div id="fq">
<div class="one">
<div class="top"><span class="iocn"></span>什么是人身保险?</div>
<div class="content">
<img src="sj4/gd.jpg" /><br/>
<p>人身保险是人的寿命和身体为...... </p>
</div>
</div>
<div class="one">
<div class="top"><span class="iocn"></span>什么是保险合同?</div>
<div class="content">
<img src="sj4/gd.jpg" /><br/>
<p>保险合同是......</p>
</div>
</div>
<div class="one">
<div class="top"><span class="iocn"></span>什么是保险人?</div>
<div class="content">
<img src="sj4/gd.jpg" /><br/>
<p>保险人是......</p>
</div>
</div>
<div class="one">
<div class="top"><span class="iocn"></span>什么是投保人?</div>
<div class="content">
<img src="sj4/gd.jpg" /><br/>
<p>投保人是......</p>
</div>
</div>
</div>
</body>
</html>