以下是关于实现慕课网淘宝搜索框的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. （原创）Callable、FutureTask中阻塞超时返回的坑点

    直接上代码 import java.util.concurrent.Callable; public class MyCallable implements Callable<String> ...

  2. socket练习：FTP

    FTP 练习收获: 1,类型转换 2,进度条实现: 3,print 输出不换行的方法: print输出 不换行的方法: 方法一: import sys   sys.stdout.write(" ...

  3. cmd生成文件目录tree

    一.生成 目录tree 到 控制台 有时候需要快速生成一个文件夹中所有成员的 目录tree,可以通过 cmd命令直接生成 命令:tree /f 二.生成 目录tree 到 指定文件 如果想讲目录树生成 ...

  4. numpy中int类型与python中的int

    [code] import numpy as np nparr = np.array([[1 ,2, 3, 4]]) np_int32 = nparr[0][0] # np_int=1 py_int ...

  5. webgl之五彩光源

    一.Three.js中有哪些光源? 在Three.js中,光源有一个基类THREE.Light(hex),这个hex接受16进制颜色作为参数而初始化光源的颜色,比如我们要定义一种绿色的光源,可以这样来 ...

  6. git自己用得着的命令

    -----------随笔记记,给自己备份------------ 1.查看分支 查看当前分支:git branch 查看远程所有分支:git branch -r/git branch -a 2.切换 ...

  7. 使用.NET Core与Google Optimization Tools实现员工排班计划Scheduling

    上一篇说完<Google Optimization Tools介绍>,让大家初步了解了Google Optimization Tools是一款约束求解(CP)的高效套件.那么我们用.NET ...

  8. windows系统搭建禅道系统（BUG管理工具）

    我也呆过三家公司了,用过的BUG管理工具也是五花八门的,常见的一般有禅道,bugzilla,jira等 个人比较推荐禅道,功能强大,主页的说明文档也是相当详细,最主要的是,用的人比较多,出现使用问题一 ...

  9. SQL PKG示例

    CREATE OR REPLACE PACKAGE PKG_SYS_LOG IS -- Author : Li Cong -- Created : 2009-10-12 -- Purpose : 存放 ...

  10. 局域网使用visual studio配合iis调试手机app

    描述:开发一款手机应用程序,服务器配置在iis,当局域网中即只有路由器无外网如何设置实时调试手机应用程序? vs配合iis调试程序的两种方式? 使用vs的debug(f5)调试网站比较常见,然而当网站 ...