找回密码
当前位置：前端开发者 > 教程 > 正文

电商网站可选择分类的搜索框

2018-10-04 分类：教程 阅读(866) 评论(0)

中卫web前端开发工程师 前端开发工程师与软件测试 深圳高级前端开发工程师待遇

代码片段 1

<!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>taobao网可选择分类的搜索框</title>
    <script src=”http://libs.baidu.com/jquery/1.9.0/jquery.js”></script>
    <style>
        *{ margin:0; padding:0;}
ul li{ list-style:none;}
body{ background:#666;}
.search{ line-height:32px; margin:250px 0 0 250px; position:relative;}
.search-list{ display:block; float:left; width:100px; height:32px; text-align:center; overflow:hidden; position:absolute; top:3px; left:3px;}
.search-list ul li{ display:block; width:100px; height:32px; background:#fff; cursor:pointer; font-size:14px; color:#666;}
.search form{ display:block; float:left;}
.search-text{ display:block; width:280px; height:32px; float:left; border:3px solid #ff4200; outline:none; padding:0 10px 0 110px; background:#f5f5f5; font-size:14px; color:#888;}
.search-button{ display:block; height:38px; float:left; width:120px; background:#ff4200; border:none; outline:none; cursor:pointer; font-size:20px; color:#fff;}
</style>
</head>
<body>
    <div class=”search”>
        <div class=”search-list”>
            <ul>
                <li>搜索宝贝</li>
                <li>搜索店铺</li>
                <li>搜索什么</li>
                <li>搜索吧</li>
            </ul>
        </div>
        <form>
            <input type=”text” class=”search-text” value=”请输入搜索内容” />
            <button class=”search-button”>搜索</button>
        </form>
    </div>
    <script>
        $(function () {
            $(“.search-list”).hover(function () {
                //设置经过box的高度
                $(this).css(“height”, “128px”);
                //设置经过时候li标签为全部显示状态
                $(“.search-list li”).css(“display”, “block”);
                //遍历每个LI标签
                $(“.search-list li”).each(function () {
                    $(this).hover(function () {
                        $(this).css(“background”, “#eee”).siblings().css(“background”, “#fff”);
                    }, function () {
                        $(this).css(“background”, “#fff”);
                    })
                    //为每个LI标签绑定点击事件
                    $(this).click(function () {
                        //设置点击每个LI的时候，box的高度
                        $(“.search-list”).css(“height”, “32px”);
                        //点击过LI 隐藏同级别的LI
                        $(this).siblings().css(“display”, “none”);
                    })
                })
            }, function () {
                $(this).css(“height”, “32px”);
            })
            //文本框获得、失去焦点文本提示信息
            function inputTips(inputText) {
                $(inputText).focus(function () {
                    if ($(this).val() == this.defaultValue) {
                        this.value = “”;
                    }
                })
                $(inputText).blur(function () {
                    if ($(this).val() == “”) {
                        this.value = this.defaultValue;
                    }
                })
            }
            inputTips(“.search-text”);
        })
    </script>
</body>
</html>

东莞web前端开发工程师 微信前端开发工程师招聘 前端开发高级工程师

赞(0)
前端开发者 » 电商网站可选择分类的搜索框
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论