首页 > 文章 > web前端 > 关于JavaScript如何切换搜索引擎的导航网页搜索框的实例代码分享

关于JavaScript如何切换搜索引擎的导航网页搜索框的实例代码分享

黄舟原创: 2017-06-18 13:15:312829浏览

这篇文章主要介绍了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>
<p 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=&#39;1&#39;" onMouseOut="this.style.opacity=&#39;0.7&#39;"/>
        </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=&#39;1&#39;" onMouseOut="this.style.opacity=&#39;0.7&#39;"/>
        </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=&#39;1&#39;" onMouseOut="this.style.opacity=&#39;0.7&#39;"/>
        </form>
      </td>
    </tr>
  </table>
</p>
<script>
  var search = document.getElementById("search");
  var formbox = document.getElementById(&#39;from_box&#39;);
  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(&#39;baidu&#39;));
        hidden_from(); //隐藏表单
        if(li[0].innerHTML.indexOf(&#39;baidu&#39;) > 0) {
          document.getElementById(&#39;from_baidu&#39;).style.display = &#39;block&#39;;
        } else if(li[0].innerHTML.indexOf(&#39;google&#39;) > 0) {
          document.getElementById(&#39;from_google&#39;).style.display = &#39;block&#39;;
        } else if(li[0].innerHTML.indexOf(&#39;sougou&#39;) > 0) {
          document.getElementById(&#39;from_sougou&#39;).style.display = &#39;block&#39;;
        }
        //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如何切换搜索引擎的导航网页搜索框的实例代码分享的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：如何学习JavaScript？怎样轻松学习JavaScript？下一篇：js轮播图无缝滚动的实例教程

查看更多