Home > Article > Web Front-end > Example code sharing on how to switch the search engine's navigation web search box using JavaScript

Example code sharing on how to switch the search engine's navigation web search box using JavaScript

黄舟Original: 2017-06-18 13:15:312785browse

This article mainly introduces the example code of the navigation web search box of javascript switching search engine. It is very good and has reference value. Friends who need it can refer to it

No more nonsense, just give it to Everyone has posted the code. The specific code is as follows:

<!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>

The above is the detailed content of Example code sharing on how to switch the search engine's navigation web search box using JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to learn JavaScript? How to learn JavaScript easily?Next article：How to learn JavaScript? How to learn JavaScript easily?

See more

Example code sharing on how to switch the search engine's navigation web search box using JavaScript

Related articles