温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JavaScript如何实现切换搜索引擎的导航网页搜索框

发布时间:2021-07-21 13:57:39 来源:亿速云 阅读:262 作者:小新 栏目:web开发

小编给大家分享一下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 ><img width="80" src="https://cache.yisu.com/upload/information/20200622/114/73473.png"/></li>
          <li ><img width="80" src="https://cache.yisu.com/upload/information/20200622/114/73474.png"/></li>
          <li ><img width="80" src="https://cache.yisu.com/upload/information/20200622/114/73475.png"/></li>
        </ul>
      </td>
      <td id="from_box" >
        <form id="from_baidu"  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"  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"  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如何实现切换搜索引擎的导航网页搜索框”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI