jQuery:1.5.5.1,多选择单一条件查询(search)

ylbtech-jQuery:jQuery学习
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>

 

warn 作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

你可能感兴趣的:(jquery)