以下是关于实现慕课网淘宝搜索框的JS代码，不过只有选择菜单栏（其余比较容易实现）。

<!doctype html>

<html>

<head>

<!--在IE浏览器的最新版本下进行渲染-->

<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />

<title>淘宝选择栏</title>

<style type="text/css">

body{font: 12px/1.5 tahoma,arial,sans-serif;}

.searchbox{position:absolute;top:200px;left:300px;}

.search-choose{float:left;position:relative;left:1px;width:55px;height:41px;overflow:hidden;background:#FFF;border-left:1px solid #F6F6F6;border-right:1px solid #e5e5e5;}

ul{list-style:none;display:block;}

ul,li{margin:0;padding:0}

.search-choose li{display:block;height:41px;line-height:41px;overflow:hidden;text-align:center;}

.search-choose li a{text-decoration: none;color:#6c6c6c;}

.search-choose .search-selected{background:#f6f6f6;display:block;}

.trigger-hover{height:auto;}

.trigger-hover li{display:block;}

</style>

</head>

<body>

    <div class='searchbox'>

        <div class='search-choose' id='search_choose'>

            <ul>

               <li id='search_1' class='search-selected'><a href='#'>宝贝</a></li>

               <li id='search_2'><a href='#'>店铺</a></li>

            </ul>

        </div>

    </div>

<!--搜索框模块-->

<!--※2搜索引擎选择模块-->

    <script>

    var flag1=true,flag=true;

    var getDOM=function(id){

        return document.getElementById(id);

    }

    var addEvent=function(id,event,fn){

        var el=getDOM(id);

        if(el.addEventListener){

            el.addEventListener(event,fn,false);

        }else if(el.attachEvent){

            el.attachEvent('on'+event,fn);

        }

    }

    addEvent('search_choose','mouseover',function(){

        if(flag1){

            this.className +=' trigger-hover';

        }

        flag1 = true;

    });

    addEvent('search_choose','mouseout',function(){

        this.className ='search-choose';

    });

    addEvent('search_1','mouseover',function(){

        if(this.className.indexOf('search-selected')<0){

            this.className +=' search-selected';

            getDOM('search_2').className='';

        }flag = true;

    });

    addEvent('search_1','mouseout',function(){

        if(flag){

            this.className ='';

        }

    });

    addEvent('search_1','click',function(){

        getDOM('search_choose').className = 'search-choose';

        flag1 = false;

        flag = false;

    });

    addEvent('search_2','mouseover',function(){

        if(this.className.indexOf('search-selected')<0){

            this.className +=' search-selected';

            getDOM('search_1').className='';

        }

        flag = true;

    });

    addEvent('search_2','mouseout',function(){

        if(flag){

            this.className ='';

        }

    });

    //交换两个li标签的内容

    addEvent('search_2','click',function(){

        var tab = getDOM('search_1').innerHTML;

        getDOM('search_1').innerHTML=getDOM('search_2').innerHTML;

        getDOM('search_2').innerHTML = tab;

        getDOM('search_choose').className = 'search-choose';

        flag = false;

    });

</script>

</body>

</html>

JS实现选择菜单栏（配合慕课网淘宝搜索框的课程）的更多相关文章

  1. selenium+PhantomJS 抓取淘宝搜索商品

    最近项目有些需求,抓取淘宝的搜索商品,抓取的品类还多.直接用selenium+PhantomJS 抓取淘宝搜索商品,快速完成. #-*- coding:utf-8 -*-__author__ =''i ...

  2. js实现百度，淘宝搜索功能

        Common.js //封装类名 function byClassName(sClassName){ if(document.getElementsBYClassName){ return d ...

  3. 学习用java基于webMagic+selenium+phantomjs实现爬虫Demo爬取淘宝搜索页面

    由于业务需要,老大要我研究一下爬虫. 团队的技术栈以java为主,并且我的主语言是Java,研究时间不到一周.基于以上原因固放弃python,选择java为语言来进行开发.等之后有时间再尝试pytho ...

  4. Android 淘宝搜索记录分析及千牛数据库名称关联

    一 taobao搜索关键字分析1.导出淘宝数据文件夹.2.搜索search 找到search文件夹.查看里面可疑文件如history_8d4255cc9c9199c6ec3be940936986b9. ...

  5. Web——在淘宝搜索到看到商品

    [摘自]http://blog.renren.com/blog/254459622/799372165 浏览器首先查询DNS服务器,将www.taobao.com转换成ip地址.负载均衡的第一步,将你 ...

  6. 百度搜索词&淘宝搜索词 接口实现

    百度和淘宝并没有正式的提供一个公开API给我们用,但是经过分析他们的源代码,还是找到了解决方法. 1 2 3 4 5 6 7 8 9 /*baidu&taobao callback*/ fun ...

  7. solr入门之參考淘宝搜索提示功能优化拼音加汉字搜索功能

    首先看一下从淘宝输入搜索keyword获取到的一些数据信息: 第一张:使用拼音的全程来查询 能够看到提示的是匹配的转换的拼音的方式,看最后一个提示项 这里另一个在指定分类文件夹下搜索的功能,难道后台还 ...

  8. js之window对象（慕课网学习笔记）

    javaScript定义了一个变量一个函数都会变成window中的一个成员 var a=1; alert(window.a) //会输出a的值 window基础 创建窗口.调整窗口.移动窗口.关闭窗口 ...

  9. js之DOM入门（慕课网学习笔记）

    DOM简介 获得元素 document.getElementById('') 1.通过id获得元素内容 document.getElementsByTagName('') 2.通过标签获得元素内容 d ...

随机推荐

  1. 转---如何让前端更安全？——XSS攻击和防御详解

    前言 平时很少关注安全这块的技术,曾经也买过一本<Web前端黑客技术揭秘>但至今还没翻过,尴尬.今天的早读文章由腾讯优测@小吉带来的分享. 正文从这开始~ 最近深入了解了一下XSS攻击.以 ...

  2. 利用Knockoutjs对电话号码进行验证

    问题来源 最近在项目中前端使用Knockoutjs,验证模块自然也是使用Knockoutjs来进行表单验证了,比较头痛,因为没有使用过Knockoutjs,更加别说要去用它做表单验证了,于是乎恶补了一 ...

  3. 解决 canvas 绘图在高清屏中的模糊问题

    解决 canvas 绘图在高清屏中的模糊问题 为什么模糊 CSS 像素是一个抽象单位(1 px),浏览器根据某种规则将 css 像素转化为屏幕需要的实际像素值. 在高清屏之前,屏幕上显示一个像素点需要 ...

  4. Windows 64位系统安装Apache2.4

    Windows 64位系统安装Apache2.4 来自:百度经验:jingyan.baidu.com 现在大部分一键安装包多是32位的,并不支持64位,直接在64位的系统上使用会报错的,所以我这里就来 ...

  5. Vim使用Vundle安装代码补全插件（YouCompleteMe）

    安装 Vundle 它的使用方法很简单,安装一个插件只需要在 ~/.vimrc 按照规则中添加 Plugin 的名称,某些需要添加路径,之后在 Vim 中使用:PluginInstall既可以自动化安 ...

  6. 11-01 Java 开发工具 eclipse从下载、安装到实际使用的详细教程

     Eclipse和MyEclipse简介 Eclipse是一种可扩展的开放源代码的IDE.起始于1999年4月,由OTI和IBM两家公司的IDE产品开发组组建. 2001年11月,IBM公司捐出价值4 ...

  7. MVC3学习：基于ObjectContext的数据增删改查操作

    数据库里面的表格,映射为对应的实体类.实体类的编写,可以自己手动编写,也可以使用工具或插件自动生成.在MVC3里面,我们可以使用VS的POCO插件自动生成实体类.如下图: 关于POCO插件的安装与使用 ...

  8. War文件部署

    其实,开始要求将源码压缩成War文件时,一头雾水! 公司项目要求做CAS SSO单点登录 也就是这玩意.... 其实war文件就是Java中web应用程序的打包.借用一个老兄的话,“当你一个web应用 ...

  9. Elasticsearch聚合 Date Histogram聚合

    转 http://www.cnblogs.com/xing901022/p/4951603.html Elasticsearch的聚合主要分成两大类:metric和bucket,2.0中新增了pipe ...

  10. 【从0到1学Web前端】javascript中的ajax对象（一） 分类： JavaScript 2015-06-24 10:18 754人阅读 评论(1) 收藏

    现在最流行的获取后端的(浏览器从服务器)数据的方式就是通过Ajax了吧.今天就来详细的来学习下这个知识吧.如果使用ajax来访问后段的数据,浏览器和浏览器端的js做了那些工作呢?我做了一个图,请大家看 ...