选项卡(十)

最新推荐文章于 2025-11-27 12:57:01 发布

原创最新推荐文章于 2025-11-27 12:57:01 发布 · 712 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class #javascript #border #search #产品 #float

本文介绍了一个包含多种搜索选项的搜索模块布局及其交互设计细节。该模块支持不同类别的搜索，如供应信息、求购信息等，并提供了热门关键词推荐，帮助用户快速定位所需信息。

<!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=gb2312" /> <title></title> <style type="text/css"> html {min-width:760px;} body{margin:10px 0 0 0;text-align:left; padding-left: 6px; background: #fff;} div,table,td,li,input,select,dd{font-size:12px;font-family:"宋体";color:#333;line-height:20px;} *{margin:0;padding:0;} h3,h4{display:inline;} img{border:0px;} ul{list-style: none;} .px12{font-size:12px;} .px14{font-size:14px;} .px18{font-size:18px;font-family:"黑体";margin:5px 0;line-height:24px;} .red{color: #f00;} .red2{color: #DF131F;} .black{color:#000000;} .white{color:#fffffe;} a:link{color:#333;text-decoration:none;} a:visited {color:#333;text-decoration:none;} a:hover{color:#c00;text-decoration:none;} a:active {color:#FF0000;text-decoration:none;} .a01 a:link{color:#000;text-decoration:none;} .a01 a:visited {color:#000;text-decoration:none;} .a01 a:hover{color:#f00;text-decoration:none;} .a01 a:active {color:#f00;text-decoration:none;} a.a02:link{color:#D91217;text-decoration:none;} a.a02:visited {color:#D91217;text-decoration:none;} a.a02:hover{color:#D91217;text-decoration: underline;} a.a02:active {color:#D91217;text-decoration:none;} a.a03:link{color:#E1122C;text-decoration:none;} a.a03:visited {color:#E1122C;text-decoration:none;} a.a03:hover{color:#E1122C;text-decoration: underline;} a.a03:active {color:#E1122C;text-decoration:none;} .a04 a:link, .a04 a:visited{color:#fffffe;text-decoration:none;} .a04 a:hover, .a04 a:active{color:#fffffe;text-decoration: underline;} .a05 a:link{color:#333;text-decoration:underline;} .a05 a:visited {color:#333;text-decoration:underline;} .a05 a:hover{color:#f00;text-decoration: underline;} .a05 a:active {color:#f00;text-decoration:underline;} a.a06:link,a.a06:visited {color:#333;text-decoration:underline;} a.a06:hover,a.a06:active{color:#f00;text-decoration: underline;} a.a09:link{color:#333; text-decoration:none; font-weight: bold;line-height:21px;} a.a09:visited {color:#333;text-decoration:none;font-weight: bold;line-height:21px;} a.a09:hover{color:#c00;text-decoration: none;font-weight: bold;line-height:21px;} a.a09:active {color:#FF0000;text-decoration:none;font-weight: bold;line-height:21px;} .clear{clear:both;} /*搜索版块*/ #search{width:760px; clear: both; margin-top: 14px; border-bottom:3px solid #ccc;} #searchnavi{background:url('/upload/remotpic/200752121342240.gif') repeat-x;width:760px;height:32px;} #searchnavi li{float:left;height:19px !important;height:/**/:32px;color:#fff;font-weight:bold;text-align:center;padding-top:10px !important;padding-top:12px;cursor:hand;} #searchnavi li.search1{background:url('/upload/remotpic/200752121343146.gif') no-repeat;width:80px;height:22px!important;height:/**/:32px;font-size:14px;padding-top:10px !important;padding-top:12px;} #searchnavi li.search2{background:url('/upload/remotpic/200752121343746.gif') no-repeat;width:89px;} #searchnavi li.search3{width:89px;} #searchcontent{border-left:#CC6633 1px solid;border-right:#CC6633 1px solid;background:url('/upload/remotpic/200752121343657.gif') repeat-x;height:61px;text-align:center;} #searconrow1,#searluntan {width:675px;margin:0 auto;padding:6px 0;} #row1left{float:left;text-align:left;} #row1right{float:left;text-align:right;color:#fffff1; padding-left:5px;} #searconrow2{ clear: both;color:#fffff1;text-align:left;width:680px!important;width /**/:758px;padding-left:80px;} #searconrow2 td{color:#fffff1;} #searconrow2 a:link,#searconrow2 a:visited {color:#fffff1;text-decoration:none;} #searconrow2 a:hover,#searconrow2 a:active {color:#fffff1;text-decoration:underline;} .hiddenbox{visibility:hidden;position:absolute;left:0;top:0;text-align:left;} /*搜索条下面*/ #recruit{width:760px;height:22px;background:#F1F1F1;} #recruit h2{display:none;} #recruit a{float:left;background:url(/upload/remotpic/200752121343398.gif) no-repeat;width:185px;height:22px;display:block;} #recruit a.l02{float:right;background:url(/upload/remotpic/200752121343247.gif) no-repeat;width:193px;} </style> <body>  <div id="search"> <div id="searchnavi"> <ul> <li style="width:106px;"></li> <li class="search1" id="changebox1" onclick="javascript:tag(1);">供应信息</li> <li class="search2" id="changebox2" onclick="javascript:tag(2);">求购信息</li> <li class="search2" id="changebox3" onclick="javascript:tag(3);">产品库</li> <li class="search2" id="changebox4" onclick="javascript:tag(4);">公司库</li> <li class="search2" id="changebox5" onclick="javascript:tag(5);">报价</li> <li class="search2" id="changebox6" onclick="javascript:tag(6);">行业资讯</li> <li class="search3" id="changebox7" onclick="javascript:tag(7);">论坛</li> </ul> </div> <div id="searchcontent"> <div id="searconrow1" style="display:block;"> <form action=" http://www.search.hc360.com/cgi-bin/seinterface.cgi" method="post" name="hyformnew" target="_parent" id="hyformnew" onsubmit="return check(hyformnew);"> <div id="row1left"> <input type="text" name="word" id="word" size="60" value="请输入您感兴趣的产品" onclick="javascript:if(this.value.substring(0,3)=='请输入');" onfocus="this.value=''"> </div> <div class="a04" id="row1right"> <input name="submit" onMouseDown="return hcclick('?hctracelog=newssearch')" type="submit" value="　搜索　" src="/upload/remotpic/200752121343891.jpg"> <input type="hidden" name="class" id="class" value="供应信息" /> <input type="hidden" name="ind" /> <input type="hidden" name="price" id="price"/> <input type="hidden" value="7" name="dt" /><a href=" http://help.hc360.com/index.aspx?id=66" onMouseDown="return hcclick('?hctracelog=newshelp')">如何搜索？</a> <a href=" http://hc360.allyes.com/main/adfclick?db=sinobnet&bid=917,2584,2664&cid=0,0,0&sid=7966&advid=396&camid=1230&show=ignore&url=http://b2b.hc360.com/rank/jbtm.html" onMouseDown="return hcclick('?hctracelog=newshelp')">关键词排名服务</a></div> </form> </div> <div id="searluntan" style="display:none;"> <form action=" http://www.search.hc360.com/cgi-bin/fb" method="post" name="hyformnew2" target="_parent" id="hyformnew2" onsubmit="return check(hyformnew2);"> <div id="row1left"> <input type="text" name="w" id="word" size="60" value="请输入您感兴趣的关键词" onclick="javascript:if(this.value.substring(0,3)=='请输入');" / onfocus="this.value=''"> </div> <div class="a04" id="row1right"> <input name="submit" type="submit" onMouseDown="return hcclick('?hctracelog=newssearch')" value="　搜索　" src="/upload/remotpic/200752121343891.jpg"> <input type="hidden" name="class" value="论坛" /> <input type="hidden" value="15" name="dt" />　<a href=" http://help.hc360.com/index.aspx?id=66" onMouseDown="return hcclick('?hctracelog=newshelp')">如何搜索？</a> <a href=" http://hc360.allyes.com/main/adfclick?db=sinobnet&bid=917,2584,2664&cid=0,0,0&sid=7966&advid=396&camid=1230&show=ignore&url=http://b2b.hc360.com/rank/jbtm.html" onMouseDown="return hcclick('?hctracelog=newshelp')">关键词排名服务</a></div> </form> </div> <div id="searconrow2"></div> <div id="produce1" class="hiddenbox"> <table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr><td><a>热门关键词：</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news594')">功放</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news594')">涂料</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news594')">热水器</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news594')">交换机</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news594')">安防</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news594')">汽配</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news594')">家具</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news594')">音箱</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news594')">更多</a><br></td></tr> </table> </div> <div id="produce2" class="hiddenbox"> <table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr><td><a>热门关键词：</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news595')">家具</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news595')">阀门</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news595')">电磁炉</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news595')">礼品</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news595')">五金</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news595')">涂料</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news595')">汽车</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news595')">电机</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news595')">更多</a><br></td></tr> </table> </div> <div id="produce3" class="hiddenbox"> <table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr><td><a>热门关键词：</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news596')">五金</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news596')">离心泵</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news596')">服装</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news596')">空调</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news596')">汽车</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news596')">玻璃</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news596')">礼品</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news596')">电器</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news596')">更多</a></td></tr> </table> </div> <div id="produce4" class="hiddenbox"> <table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr><td><a>热门关键词：</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news597')">电子</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news597')">玩具</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news597')">仪器</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news597')">电器</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news597')">玻璃</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news597')">安防</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news597')">建材</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news597')">运输</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news597')">更多</a><br></td></tr> </table> </div> <div id="produce6" class="hiddenbox"> <table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr><td><a>热门关键词：</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news598')">钢材</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news598')">汽车配件</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news598')">电器</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news598')">服装</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news598')">包装</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news598')">空调</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news598')">玩具</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news598')">灯光</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news598')">更多</a><br></td></tr> </table> </div> <div id="produce5" class="hiddenbox"> <table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr><td><a>热门关键词：</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news614')">投影机</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news614')">笔记本电脑</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news614')">MP3</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news614')">音箱</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news614')">数码相机</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news614')">摄像机</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news614')">交换机</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news614')">MP4</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news614')">更多</a><br></td></tr> </table> </div> <div id="produce7" class="hiddenbox"> <table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr><td><table width="100%" border="0" cellspacing="0" cellpadding="2"><tr><td><a>热门关键词：</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news735')">商务</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news735')">女商</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news735')">管理</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news735')">防骗</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news735')">热辣图片</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news735')">就业</a> <a href="#" target="_blank" onMouseDown="return hcclick('?hctracelog=news735')">黄金甲</a> <a href=" http://bbs.hc360.com" target="_blank" onMouseDown="return hcclick('?hctracelog=news735')">更多</a></td></tr></table></td></tr> </table> </div> </div> <script type="text/javascript"> var num=7; function getObj(objName){return(document.getElementById(objName));} function tag(id){ var keywords = document.getElementById("hyformnew").word.value; getObj("searluntan").style.display="none"; getObj("searconrow1").style.display="block"; if(id==7){ getObj("searconrow1").style.display="none"; getObj("searluntan").style.display="block"; } if(keywords == "" || keywords=="请输入您感兴趣的产品"||keywords=="请输入产品名的关键词"||keywords=="请输入公司名的关键词"||keywords=="请输入您感兴趣的关键词") { switch(id){ case 1: getObj('word').value="请输入您感兴趣的产品"; getObj('class').value="供应信息"; getObj('price').value = "";break; case 2: getObj('word').value="请输入您感兴趣的产品"; getObj('class').value="求购信息"; getObj('price').value = "";break; case 3: getObj('word').value="请输入产品名的关键词"; getObj('class').value="产品库"; getObj('price').value = "";break; case 4: getObj('word').value="请输入公司名的关键词"; getObj('class').value="企业库"; getObj('price').value = "";break; case 5: getObj('word').value="请输入产品名的关键词"; getObj('class').value="供应库";getObj('price').value = "1"; break; case 6: getObj('word').value="请输入您感兴趣的关键词"; getObj('class').value="行业资讯";getObj('price').value = ""; } } else{ document.getElementById("hyformnew").word.value = keywords; switch(id){ case 1: getObj('class').value="供应信息"; getObj('price').value = ""; break; case 2: getObj('class').value="求购信息";getObj('price').value = ""; break; case 3: getObj('class').value="产品库";getObj('price').value = ""; break; case 4: getObj('class').value="企业库";getObj('price').value = ""; break; case 5: getObj('class').value="供应库";getObj('price').value = "1"; break; case 6: getObj('class').value="行业资讯";getObj('price').value = ""; } } getObj("searconrow2").innerHTML=getObj("produce"+id).innerHTML; for(var i=1;i<=num;i++){ if(i==id) { getObj("changebox"+i).className="search1"; } else{ if(i==7 || i==(id-1)){ getObj("changebox"+i).className="search3";} else{ getObj("changebox"+i).className="search2";} } } } function check(theForm) { if (theForm.word.value.substring(0,3) =="请输入" || theForm.word.value == "") { alert("请输入查询内容！"); theForm.word.focus(); return false; } return true; } getObj("searconrow2").innerHTML=getObj("produce1").innerHTML; </script> </div>  </body> </html>