jQuery:1.5.5.1,多选择单一条件查询(search)
ylbtech-jQuery:jQuery学习 |
jQuery语法实例
jQuery:1.5.4.1.B,效果截图返回顶部 |
jQuery:1.5.5.1,多选择单一条件查询(search) 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" /> <title>3G书城</title> <script type="text/javascript" src="jquery-1.3.1.js" tppabs="http://www.3gsc.com.cn/JavaScript/jquery-1.3.1.js"></script> <style type="text/css" > /* CSS Document */ *{ margin:0; padding:0; } body{ font-size:12px; line-height:18px; color:#282828; background-color:#fff; font-family:宋体, Arial, Helvetica, sans-serif; margin:0 auto; } div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, em, img, q, dl, dt, dd, ul, li, ol{ border:none; } div{ word-break:break-all; word-wrap:break-word; } li{ list-style:none } a{ text-decoration:none; } a:hover{ text-decoration:underline; } .search{ width:484px; height:66px; margin-top:17px; float:right; overflow:hidden; position:relative; } .search .top{ position:absolute; top:0; right:0; z-index:100; } .search .item1{ width:57px; height:27px; background:url("search_item1.jpg"/*tpa=http://www.3gsc.com.cn/images/search_item1.jpg*/) no-repeat; float:left; display:block; text-align:center; color:#282828; font-weight:bold; line-height:23px; margin:0 3px; } .search .item2{ width:57px; height:27px; background:url("search_item2.jpg"/*tpa=http://www.3gsc.com.cn/images/search_item2.jpg*/) no-repeat; float:left; display:block; text-align:center; color:#282828; line-height:23px; margin:0 3px; } .search .item1 a:hover{ text-decoration:none; } .search a:hover{ text-decoration:none; } .search .bottom{ width:510px; height:43px; position:absolute; bottom:0; border-left:1px solid #dfdfdf; border-right:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; border-top:1px solid #ffb100; } .search_text{ width:300px; padding-left:2px; color:#585858; font-size:12px; line-height:26px; height:26px; border:1px solid #d0d0d0; margin-top:8px; } .search .span1{ padding:0 3px 0 12px; line-height:28px; } .search .button01{ width:54px; height:28px; background:url("search_button.jpg"/*tpa=http://www.3gsc.com.cn/images/search_button.jpg*/) no-repeat; text-align:center; line-height:28px; border:none; color:#282828; font-size:12px; cursor:pointer; } </style> </head> <body> <div class="header"> <div class="search"> <div class="top" id="headsearchtab"> <a class="item1" id="SearchTab0" href="javascript:changesearch(0);">综 合</a> <a class="item2" id="SearchTab1" href="javascript:changesearch(1);">书 名</a> <a class="item2" id="SearchTab2" href="javascript:changesearch(2);">作 者</a> <a class="item2" id="SearchTab3" href="javascript:changesearch(3);"> 关键字</a> <a class="item2" id="SearchTab4" href="javascript:changesearch(4);">简 介</a> </div> <div class="bottom" id="headsearchinput"> <form id="formsearch" name="formsearch" method="get" action="http://www.3gsc.com.cn/search/index.aspx" target="_blank"> <span class="span1">请输入小说关键字:</span> <input name="keyword" id="keyword" type="text" class="search_text" /> <input name="btSearch" id="btbtSearch" type="submit" class="button01" value="搜 索" /> <input id="keytype" name="keytype" type="text" style="display: none" value="6" /> </form> </div> </div> </div> <!-- 页面框架导航--> <script type="text/javascript"> //更换搜索类型 function changesearch(id) { for (i = 0; i < 5; i++) { $("#SearchTab" + i).removeClass('item1'); $("#SearchTab" + i).addClass('item2'); } $("#SearchTab" + id).removeClass('item2'); $("#SearchTab" + id).addClass('item1'); $("#keytype").val(id); } $(function() { $('#btbtSearch').click(function() { //验证表单 var errorMsg = ""; //标题 if ($('#keyword').val() == "") { errorMsg += '请输入搜索关键词'; } if (errorMsg.length > 0) { alert(errorMsg); return false; } }); }); </script> </body> </html>
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |