Heim > Artikel > Web-Frontend > Beispielcode-Sharing zum Umschalten des Navigations-Websuchfelds der Suchmaschine mithilfe von JavaScript

Beispielcode-Sharing zum Umschalten des Navigations-Websuchfelds der Suchmaschine mithilfe von JavaScript

黄舟Original: 2017-06-18 13:15:312830Durchsuche

In diesem Artikel wird hauptsächlich der Beispielcode des Navigations-Websuchfelds zum Wechseln von Suchmaschinen mit JavaScript vorgestellt. Er ist sehr gut und hat Referenzwert.

Kein Unsinn mehr. Geben Sie es einfach an Jeder, der den Code gepostet hat, lautet wie folgt:

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

Das obige ist der detaillierte Inhalt vonBeispielcode-Sharing zum Umschalten des Navigations-Websuchfelds der Suchmaschine mithilfe von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie lerne ich JavaScript? Wie lerne ich JavaScript einfach?Nächster Artikel：Wie lerne ich JavaScript? Wie lerne ich JavaScript einfach?

In Verbindung stehende Artikel

Mehr sehen