- A+
内容摘要
帝国cms使用Jquery实现多表搜索切换
文章正文
功能：帝国cms使用Jquery实现多表搜索切换代码：
|
<!doctype html> <html> <head> <meta charset="utf-8"> <title>全站搜索</title> <style type="text/css"> body{ background:#ffffff;color:#333333;font:12px/20px SimSun,Tahoma,Helvetica,Arial,sans-serif;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,p,img { padding: 0; margin: 0; } img {border:0;} ol,ul,li{ list-style: none; } a{color:#272727;text-decoration:none; outline:none;} a:hover {color:#005e9c; text-decoration:none; } .fl{ float:left; } .fr{ float:right; } .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .sousuo{ width:500px;margin: 120px auto 250px;} .sousuo img{ margin: 0 0 30px 80px;} .sousuo ul,.soujieguo ul{ width: 100%; clear: both;} .sousuo ul li,.soujieguo ul li{cursor: pointer; float: left; color: #005e9c;width:70px; text-align: center; padding: 2px 5px;} .sousuo ul li.on,.soujieguo ul li.on{ font-weight: bold; background: #0073c3; color:#fff;} .sousuo .soutext,.soujieguo .soutext{ border: 1px solid #cbcbcb; height: 30px; width: 400px; vertical-align: middle;line-height:30px;font-size: 14px; } .sousuo .sou,.soujieguo .sou{height: 32px; width: 80px; border: none; border-left: none; background: #0073c3; color: #fff;vertical-align: middle;} .soufoot{ text-align: center;width: 960px; margin: 0 auto;} .soufoot p.fl{float: none;} .soujieguo { padding: 20px;} .soujieguo dt{ line-height: 40px;} .soujieguo dd{ margin: 10px 0;border-bottom: 1px dashed #cccccc; padding-bottom: 10px;} .soujieguo h2{ font-size: 14px; color: #005e9c;} .soujieguo h2 a{color: #005e9c;} .soujieguo h2 a:hover{text-decoration: underline;} .soujieguo p{ margin: 0;} .soujieguo a{ color:#659B28; } </style> </head> <body> <!--主体开始--> <div class="main clearfix"> <div class="sousuo"> <form name="searchform" method="post" action="/e/search/index.php"> <input type="hidden" name="tbname" id="biao" value="news"> <input type="hidden" name="show" value="title,smalltext,newstext"> <input type="hidden" name="tempid" id="tempid" value="1"> <ul> <!-- 下面biao指的是数据表名，tempid是对应数据表名的搜索模板id --> <li biao="news" tempid="1" class="on">新闻搜索</li> <li biao="download" tempid="2">下载搜索</li> <li biao="photo" tempid="3">图片搜索</li> <li biao="flash" tempid="4">flash搜索</li> </ul> <ul> <input type="text" name="keyboard" value="" class="soutext" /><input type="submit" value="搜 索" class="sou"> </ul> </form> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(".sousuo li").click(function(){ $(this).siblings().removeClass("on"); $(this).addClass("on"); var biao=$(this).attr("biao"); $("#biao").val(biao); var tempid=$(this).attr("tempid"); $("#tempid").val(tempid); }); </script> </body> </html> |
代码注释
- 我的微信
- 这是我的微信扫一扫
-
- 我的微信公众号
- 我的微信公众号扫一扫
-
