类中华英才网职位选择的网页效果

来源:互联网 发布:mac系统文件多大 编辑:程序博客网 时间:2024/04/27 18:55

<!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=gbk" />
<title>类中华英才网</title>
<script src="http://192.168.0.128/slcxwm2.0/plugin/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
   $("#test").click(function(){
       $("#industry_box").fadeIn("fast");
   });
   $("#close_industrybox").click(function(){
        $("#industry_box").fadeOut("fast");
   });
   $("#showdata_1 td").each(function(){
       var temp=$(this).attr("id");
    var temp_id=temp.substr((temp.lastIndexOf("_")+1),temp.length);
    $(this).hover(function(){
        $("#float_"+temp_id).fadeIn("fast");
    },function(){
        $("#float_"+temp_id).fadeOut("fast");
    });
 });
});
function chk(id){
  //  alert($("#checkbox_1").attr("checked"));
 if($("#checkbox_1").attr("checked")==true){
    alert(1);
 }
   // if($("input[id='checkbox_1']:checked").size()==1){
 //    alert(1);
 //}
  /*  if($("#checkbox_"+id).checked==true){
     alert(1);
 }*/
}
</script>
<style type="text/css">
<!--
body,td {
 font-family: "Verdana";
 font-size: 12px;
 COLOR: #666666;
 line-height: 22px;
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 SCROLLBAR-FACE-COLOR: #D4D4D4;
 SCROLLBAR-HIGHLIGHT-COLOR: #EBE9EA;
 SCROLLBAR-SHADOW-COLOR: #EBE9EA;
 SCROLLBAR-3DLIGHT-COLOR: #A5A5A5;
 SCROLLBAR-ARROW-COLOR:  #000000;
 SCROLLBAR-TRACK-COLOR: #EBE9EA;
 SCROLLBAR-DARKSHADOW-COLOR: #7F7F7F;
}
.btn{
  height:20px;
  text-align: center;
  width:40px;
  color:#333;
  font-size:12px;
  background-color:#BBBBBB;
  border-left:1px solid #000000;
  border-top:1px solid #000000;
  border-right:1px solid #000000;
  border-bottom:1px solid #000000;
  cursor:pointer;
}

#showdata_1 td{
  border-bottom:#AAAAAA dotted 1px;
}

#showdata_1 ul{
     list-style-type:none;
  padding-left:5px;
  margin:0px;
}

#showdata_1 li{
     list-style-type:none;
  padding-left:0px;
}

#industry_box {
 background-color: #E4ECF3;
 height: 600px;
 width: 600px;
 border:#5C80C1 solid 2px;
 margin-left:100px;
 margin-top:100px;
 display:none;
}
#bar {
 float: left;
 height: 20px;
 width: 600px;
 background-color:#5278B7;
}
#tip_1 {
 float: left;
 padding-left:10px;
 height: 25px;
 width: 590px;
 border-bottom:#FFFFFF outset 1px;
}
#tip_2 {
 float: left;
 height: 70px;
 width: 600px;
 padding-left:10px;
}
#content {
 float: left;
 height: 483px;
 width: 600px;
 background-color:#FFFFFF;
}
-->
</style>
</head>

<body>
<button id="test">测试</button>
<div id="industry_box">
     <table width="100%" border="0" cellpadding="0" cellspacing="0">
       <tr>
         <td><div id="bar"><span style="padding-right:500px; color:#FFFFFF;">&nbsp;&nbsp;职位类别</span><span style="color:#FFFFFF; cursor:pointer;" id="close_industrybox">关闭</span></div></td>
    </tr>
       <tr>
         <td><div id="tip_1"><span style="padding-right:420px;">提示:</span><span><button id="" class="btn">确&nbsp;定</button>&nbsp;&nbsp;<button id="" class="btn">清&nbsp;空</button></span></div></td>
    </tr>
       <tr>
         <td><div id="tip_2">当您直接选择行业类别时,您将会获得更多的搜索结果<br />
           当您选择"<img alt="" src="http://st.mychinahr.com/a/sjob6.0/style/image/ico1.gif" />"下的具体职位时,将会获得更为准确的搜索结果<br />
         您最多可以选择5个行业类别 </div></td>
    </tr>
       <tr>
         <td><div id="content">
             <table width="100%" border="0" cellspacing="0" cellpadding="0" id="showdata_1">
                  <tr>
                    <td id="td_1"><div align="left" style="position:relative;"><input type="checkbox" value="1" id="checkbox_1" onclick="chk(1);"/><span id="text_1">金融</span>
                        <div style="width:380px; height:200px; border:#5C80C1 solid 1px; position:absolute; background-color:#FFFFFF; left:200px; display:none;" id="float_1">
                                  <ul>
                                    <li><div align="left"><input type="checkbox" value="1" />计算机.网络.技术类</div></li>
                                    <li><div align="left"><input type="checkbox" value="1" />计算机.网络.技术类</div></li>
                                    <li><div align="left"><input type="checkbox" value="1" />计算机.网络.技术类</div></li>
                                    <li><div align="left"><input type="checkbox" value="1" />计算机.网络.技术类</div></li>
                                    <li><div align="left"><input type="checkbox" value="1" />计算机.网络.技术类</div></li>
                                    <li><div align="left"><input type="checkbox" value="1" />计算机.网络.技术类</div></li>
                                    <li><div align="left"><input type="checkbox" value="1" />计算机.网络.技术类</div></li>
                                    <li><div align="left"><input type="checkbox" value="1" />计算机.网络.技术类</div></li>
                                  </ul>
                        </div></div></td>
                    <td><div align="left"><input type="checkbox" value="1" />房地产</div></td>
                  </tr>
                 <tr>
                    <td id="td_2"><div align="left" style="position:relative;"><input type="checkbox" value="2" id="checkbox_2"/><span id="text_2">商贸物流</span>
                        <div style="width:380px; height:200px; border:#5C80C1 solid 1px; position:absolute; background-color:#FFFFFF; left:200px; display:none;" id="float_2">
                                  <ul>
                                    <li><div align="left"><input type="checkbox" value="1" />计算机.网络.技术类</div></li>
                                    <li><div align="left"><input type="checkbox" value="1" />计算机.网络.技术类</div></li>
                                    <li><div align="left"><input type="checkbox" value="1" />计算机.网络.技术类</div></li>
                                    <li><div align="left"><input type="checkbox" value="1" />计算机.网络.技术类</div></li>
                                    <li><div align="left"><input type="checkbox" value="1" />计算机.网络.技术类</div></li>
                                    <li><div align="left"><input type="checkbox" value="1" />计算机.网络.技术类</div></li>
                                    <li><div align="left"><input type="checkbox" value="1" />计算机.网络.技术类</div></li>
                                    <li><div align="left"><input type="checkbox" value="1" />计算机.网络.技术类</div></li>
                                    <li><div align="left"><input type="checkbox" value="1" />计算机.网络.技术类</div></li>
                                  </ul>
                        </div></div></td>
                    <td><div align="left"><input type="checkbox" value="1" />交通运输</div></td>
                  </tr>
                  <tr>
                    <td id="td_5"><div align="left"><input type="checkbox" value="1" />摄影,休闲娱乐及体育健身</div></td>
                    <td id="td_6"><div align="left"><input type="checkbox" value="1" />艺术,影音及传媒,出版</div></td>
                  </tr>
                  <tr>
                    <td id="td_7"><div align="left"><input type="checkbox" value="1" />广告展览</div></td>
                    <td id="td_8"><div align="left"><input type="checkbox" value="1" />印刷包装</div></td>
                  </tr>
                  <tr>
                    <td><div align="left"><input type="checkbox" value="1" />美容美发,保健服务</div></td>
                    <td><div align="left"><input type="checkbox" value="1" />旅游,酒店及餐饮</div></td>
                  </tr>
                  <tr>
                    <td><div align="left"><input type="checkbox" value="1" />教育科研及培训机构</div></td>
                    <td><div align="left"><input type="checkbox" value="1" />服饰鞋帽眼镜</div></td>
                  </tr>
                  <tr>
                    <td><div align="left"><input type="checkbox" value="1" />汽车及配件</div></td>
                    <td><div align="left"><input type="checkbox" value="1" />家居建材</div></td>
                  </tr>
                  <tr>
                    <td><div align="left"><input type="checkbox" value="1" />美容保健体育产品</div></td>
                    <td><div align="left"><input type="checkbox" value="1" />电子五金专业仪器</div></td>
                  </tr>
                  <tr>
                    <td><div align="left"><input type="checkbox" value="1" />书报及音像制品</div></td>
                    <td><div align="left"><input type="checkbox" value="1" />IT,电子,移动通信及相关服务</div></td>
                  </tr>
                  <tr>
                    <td><div align="left"><input type="checkbox" value="1" />医院,生物医药及医疗</div></td>
                    <td><div align="left"><input type="checkbox" value="1" />电子通信产品生产加工</div></td>
                  </tr>
                  <tr>
                    <td><div align="left"><input type="checkbox" value="1" />生物化工</div></td>
                    <td><div align="left"><input type="checkbox" value="1" />食品纺织生产加工</div></td>
                  </tr>
                  <tr>
                    <td><div align="left"><input type="checkbox" value="1" />金属冶炼及材料加工</div></td>
                    <td><div align="left"><input type="checkbox" value="1" />仪表仪器及自动化生产加工</div></td>
                  </tr>
                  <tr>
                    <td><div align="left"><input type="checkbox" value="1" />机械,机电,重工业生产加工</div></td>
                    <td><div align="left"><input type="checkbox" value="1" />五金汽配,塑料,原材料生产加工</div></td>
                  </tr>
                  <tr>
                    <td><div align="left"><input type="checkbox" value="1" />能源,电力,石化</div></td>
                    <td><div align="left"><input type="checkbox" value="1" />行政机构及社会团体</div></td>
                  </tr>
                  <tr>
                    <td><div align="left"><input type="checkbox" value="1" />农业</div></td>
                    <td><div align="left"><input type="checkbox" value="1" />林业</div></td>
                  </tr>
                  <tr>
                    <td><div align="left"><input type="checkbox" value="1" />畜牧业</div></td>
                    <td><div align="left"><input type="checkbox" value="1" />渔业</div></td>
                 </tr>
                 <tr>
                    <td colspan="2"><div align="left"><input type="checkbox" value="1" />食品(农业产品,烟酒,茶叶,饮料零食)</div></td>
                 </tr>
                 <tr>
                    <td colspan="2"><div align="left"><input type="checkbox" value="1" />特殊物品(珠宝,礼品,办公用品,玩具,古玩,奖牌,钟表,床上用品)</div></td>
                 </tr>
                  <tr>
                    <td colspan="2"><div align="left"><input type="checkbox" value="1" />专业服务(财会,咨询,法律,留学移民中介,人才猎头,拍卖)</div></td>
                 </tr>
                 <tr>
                    <td colspan="2"><div align="left"><input type="checkbox" value="1" />社会基础服务(医疗,家政,商标知识产权,婚介婚礼,安全,维修,物业)</div></td>
                 </tr>
             </table>

         </div></td>
    </tr>
   </table>
</div>
</body>
</html>

原创粉丝点击