jQuery：1.5.5.1，多选择单一条件查询（search）

ylbtech-jQuery:jQuery学习

jQuery语法实例

效果截图
多选择单一条件查询（search）

jQuery：1.5.4.1.B,效果截图返回顶部

ylb_search

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/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

posted on 2013-01-25 21:31 ylbtech 阅读(2610) 评论(0) 编辑收藏举报