JavaScript切换搜索引擎的导航网页搜索框实例代码

更新时间：2017年06月11日 08:52:41 作者：longzhoufeng

这篇文章主要介绍了javascript切换搜索引擎的导航网页搜索框的实例代码，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下

废话不多说了，直接给大家贴代码了，具体代码如下所述：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <style>
    #search ul {
      list-style-type: none;
      display: block;
      width: 100px;
      height: 33px;
      margin: 0;
      padding: 0;
      border: 0px;
      float: left;
    }
    #search li {
      border: 0px;
      margin: 0px;
      padding: 0px;
    }
    #search .selected {
      display: block;
    }
    #search form {
      margin: 0px;
      padding: 0px;
    }
    #search input {
      height: 30px;
      width: 400px;
      margin: 0px;
    }
    #search .button {
      font-size: 17px;
      font-weight: 600;
      color: #002D96;
      height: 30px;
      width: 110px;
      margin-left: 50px;
      background: #e6efc2;
      opacity: 0.8;
      border: #7fb80e 1px solid;
      cursor: pointer;
      -webkit-border-radius: 2px;
      border-radius: 2px;
    }
  </style>
</head>
<body>
<div id="search" align="center">
  <table>
    <tr>
      <td>
        <ul>
          <li style="display:block;"><img width="80" src="https://www.baidu.com/img/bd_logo1.png"/></li>
          <li style="display:none;"><img width="80" src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"/></li>
          <li style="display:none;"><img width="80" src="https://www.sogou.com/images/logo2014/error180x60.png"/></li>
        </ul>
      </td>
      <td id="from_box" style="padding-left:10px;">
        <form id="from_baidu" style="display:block" action="http://www.baidu.com/baidu" target="_blank" method="get">
          <input name="" type="hidden" value="baidu"/>
          <input type="text" name="word"/>
          <input class="button" type="submit" value="百度一下" onMouseOver="this.style.opacity='1'" onMouseOut="this.style.opacity='0.7'"/>
        </form>
        <form id="from_google" style="display:none" action="http://www.google.com/search" target="_blank" method="get">
          <input type="text" name="q"/>
          <input class="button" type="submit" value="google搜索" onMouseOver="this.style.opacity='1'" onMouseOut="this.style.opacity='0.7'"/>
        </form>
        <form id="from_sougou" style="display:none" action="http://www.sogou.com/web" target="_blank" name="sogou_queryform">
          <input type="text" name="query">
          <input class="button" type="submit" value="sougou搜索" onMouseOver="this.style.opacity='1'" onMouseOut="this.style.opacity='0.7'"/>
        </form>
      </td>
    </tr>
  </table>
</div>
<script>
  var search = document.getElementById("search");
  var formbox = document.getElementById('from_box');
  var forms = formbox.getElementsByTagName("form");
  var ul = search.getElementsByTagName("ul")[0];
  var li = ul.getElementsByTagName("li");
  var length = li.length;
  li[0].onclick = function() {
    for(var i = 1; i < length; i++) {
      li[i].style.display = "block";
    }
  }
  var n = 0; //第一个显示表单的位置
  for(var i = 1; i < length; i++) {
    li[i].onclick = function(a) {
      return function() {
        //交换显示的html内容
        var temp = li[0].innerHTML;
        li[0].innerHTML = this.innerHTML;
        this.innerHTML = temp;
        for(var j = 1; j < length; j++) {
          li[j].style.display ="none";
        }
        //交换表单的显示
        //alert(li[0].innerHTML.substring(37,7));
        //alert(li[0].innerHTML.indexOf('baidu'));
        hidden_from(); //隐藏表单
        if(li[0].innerHTML.indexOf('baidu') > 0) {
          document.getElementById('from_baidu').style.display = 'block';
        } else if(li[0].innerHTML.indexOf('google') > 0) {
          document.getElementById('from_google').style.display = 'block';
        } else if(li[0].innerHTML.indexOf('sougou') > 0) {
          document.getElementById('from_sougou').style.display = 'block';
        }
        //alert(this.innerHTML);
        //forms[n].style.display = "none";
        //forms[a].style.display = "block";
        //n = a;
      }
    }(i);
    li[i].onmouseover = function() {
      this.style.border ="#7fb80e 1px solid";
      this.style.background ="#f2eada";
    }
    li[i].onmouseout = function() {
      this.style.border = "0px";
      this.style.background = "inherit";
    }
  }
  //隐藏搜索框表单的函数
  function hidden_from() {
    for(var j = 0; j < forms.length; j++) {
      forms[j].style.display = "none";
    }
  }
</script>
</body>
</html>

以上所述是小编给大家介绍的JavaScript切换搜索引擎的导航网页搜索框实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

js
搜索框

制作微信小程序的小白简单入门教程
这篇文章主要介绍了制作微信小程序的小白简单入门教程。本文就是小程序学习笔记，整理成教程的形式，希望对于初学者有用。需要学会的主要知识点都会讲到，目标是你读完这个教程，就能学会怎么写小程序。
2022-12-12
JavaScript中async await更优雅的错误处理方式
async/await中的异常处理很让人混乱,尽管有很多种方式来应对async 函数的异常,但是连经验丰富的开发者有时候也会搞错,所以这篇文章主要给大家介绍了关于JavaScript中async await更优雅的错误处理方式的相关资料,需要的朋友可以参考下
2021-09-09
Javascript动画效果（4）
这篇文章主要为大家详细介绍了第四篇Javascript动画效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
javascript轻量级模板引擎juicer使用指南
Juicer 是一个高效、轻量的前端 (Javascript) 模板引擎，使用 Juicer 可以是你的代码实现数据和视图模型的分离(MVC)。
2014-06-06
js+html+css实现鼠标移动div实例
移动div对于很多的网有们来说是一件很熟悉的事了，本文老生长谈，用js实现鼠标移动div，希望大伙们可以举一反三，感兴趣的朋友可以参考下，或许本文对你有所帮助
2013-01-01
Bootstrap零基础入门教程(二)
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。这篇文章主要介绍了Bootstrap零基础入门教程(二) 的相关资料，非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧
2016-07-07
Bootstrap每天必学之按钮
Bootstrap每天必学之按钮组工具栏，本文讲解的就是大家最为常用的按钮组工具栏，感兴趣的小伙伴们可以参考一下
2015-11-11
在使用JSON格式处理数据时应该注意的问题小结
这篇文章主要介绍了在使用JSON格式处理数据时应该注意的问题，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2017-05-05
ECMAScript 数据类型之Number类型
这篇文章主要介绍了 ECMAScript 数据类型之Number类型，Number类型使用IEEE 754格式表示整数和浮点值，更多相关内容请需要的小伙伴参考下面文章内容
2022-06-06
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
这篇文章主要介绍了js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动,需要的朋友可以参考下
2014-04-04