以下是 jQuery手机端兼职工作筛选代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
<title>jQuery手机端兼职工作筛选代码</title>
<link rel="stylesheet" type="text/css" href="css/job.css" />
<script src="js/jquery.js"></script>
<script type="text/javascript">
function resizeImage(obj){
//alert(obj.width+":"+screen.availWidth);
if(obj.height>screen.availHeight)obj.height=screen.availHeight;
if(obj.width!=document.body.clientWidth)obj.width=document.body.clientWidth;
}
$(function(){
var navbar = 1; // 默认值为0，二级菜单向下滑动显示；值为1，则二级菜单向上滑动显示
if(navbar ==0){
$('.navbar li').hover(function(){
$('.second',this).css('top','30px').show();
},function(){
$('.second',this).hide();
});
}else if(navbar ==1){
$('.navbar li').hover(function(){
$('.second',this).css('top','30px').show();
},function(){
$('.second',this).hide();
});
}
});
</script>
</head>
<body>
<div class="header">
<table width="100%" border="0">
<tr>
<td width="20%"><img src="images/img_001_03.png" width="10" height="22" /></td>
<td width="60%"><div class="head" align="center">海量兼职</div></td>
<td width="20%"> </td>
</tr>
</table>
</div>
<div class="navbar">
<ul>
<li>
<a href="javascript:;" class="hover" id="tab_tit_1" rel="1"><strong>深圳</strong></a>
<div class="second" style="width:100%;" >
<a href="javascript:;" id="tab_tit_1-_1" rel="1">广州</a>
<a href="javascript:;" id="tab_tit_1_2" rel="1">东莞</a>
</div>
</li>
<li>
<a href="javascript:;" id="tab_tit_2" rel="2"><strong>全深圳 </strong></a>
<div class="second" style="width:100%;">
<a href="javascript:;" id="tab_tit_2_1" rel="2">宝安区</a>
<a href="javascript:;" id="tab_tit_2_1" rel="2">盐田区</a>
<a href="javascript:;" id="tab_tit_2_1" rel="2">福田区</a>
<a href="javascript:;" id="tab_tit_2_1" rel="2">龙华区</a>
</div>
</li>
<li>
<a href="javascript:;" id="tab_tit_3" rel="3"><strong>全部兼职 </strong></a>
<div class="second" style="width:100%;">
<a href="javascript:;" id="tab_tit_3_1" rel="3">产品直销代理</a>
<a href="javascript:;" id="tab_tit_3_2" rel="3">伴跑男女神</a>
<a href="javascript:;" id="tab_tit_3_3" rel="3">家教</a>
<a href="javascript:;" id="tab_tit_3_4" rel="3">翻译</a>
</div>
</li>
<li>
<a href="javascript:;" id="tab_tit_4" rel="4"><strong class="last" style="position:relative;">排名 </strong></a>
<div class="second" style="width:100%;">
<a href="javascript:;" id="tab_tit_4_1" rel="4">1</a>
<a href="javascript:;" id="tab_tit_4_2" rel="4">2</a>
<a href="javascript:;" id="tab_tit_4_3" rel="4">3</a>
<a href="javascript:;" id="tab_tit_4_4" rel="4">4</a>
</div>
</li>
</ul>
</div>
<div class="content">
<div class="content_1">
<table width="100%" border="0">
<tr>
<td width="20%"><div class="fl">代理</div></td>
<td width="80%"><div class="con">补品代理</div></td>
</tr>
</table>
</div>
<div class="content_1">
<table width="100%" border="0">
<tr>
<td width="20%"><div class="fl">其他</div></td>
<td width="80%"><div class="con">伴跑男/女神</div></td>
</tr>
</table>
</div>
<div class="content_1">
<table width="100%" border="0">
<tr>
<td width="20%"><div class="fl">其他</div></td>
<td width="80%"><div class="con">男/女友出租</div></td>
</tr>
</table>
</div>
<div class="content_1">
<table width="100%" border="0">
<tr>
<td width="20%"><div class="fl">促销</div></td>
<td width="80%"><div class="con">手机膜</div></td>
</tr>
</table>
</div>
<div class="content_1">
<table width="100%" border="0">
<tr>
<td width="20%"><div class="fl">其他</div></td>
<td width="80%"><div class="con">坚固期权</div></td>
</tr>
</table>
</div>
</div>
</body>
</html>CSS代码(job.css):
@charset "utf-8";/* CSS Document */
*{padding:0;margin:0;}
body,nav,dl,dt,dd,p,h1,h2,h3,h4,ul,ol,li,input,button,textarea,footer{margin:0;padding:0}
body{height:100%;width:100%;font-family:"微软雅黑";overflow:hidden;}
ul,ol{list-style:none}
a{text-decoration:none;color:#000}
a:hover{color:#1c5aa2;text-decoration:none}
a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}
img{vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;-webkit-tap-highlight-color:rgba(0,0,0,0)}
button,input,select,textarea{font-size:100%;vertical-align:middle;outline:0}
textarea{resize:none}
section{padding-top:20px;}
.header{width:100%;height:50px;color:#FFF;line-height:50px;background-color:#45a8ff;font-size:22px;}
.header img{padding-left:20px;}
/*navbar*/
.navbar{height:40px;border-bottom:1px solid #dadada;background:#f1f1f1;}
.navbar li{width:25%;margin-right:-.5px;float:left;position:relative;color:#1c1919;text-align:center;}
.navbar li a:hover{background:#f1f1f1;}
.navbar li a{height:21px;padding-top:10px;padding-bottom:10px;display:block;font-size:14px;color:#666;}
.navbar li a strong{display:block;height:16px;line-height:16px;border-right:1px solid #282727;margin-right:1px;font-size:16px;}
.navbar li a strong.last{border-right:none;}
.navbar li .second{width:25%;z-index:9999;}
.navbar li .second{width:25%;margin-top:2px;position:absolute;display:none;background-color:#f1f1f1;}
.content{width:100%;overflow:hidden;}
.content .content_1{margin-top:8px;font-size:16px;border-bottom:1px solid #d7d8d9;padding-bottom:8px;}
.content .fl{margin-left:25%;width:60px;height:30px;line-height:30px;background-color:#45a8ff;text-align:center;color:#FFF;border-radius:5px;}
.content .con{height:30px;line-height:30px;color:#282727;padding-left:10px;}
分享到QQ
分享到微博
微信扫一扫
