| 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>
