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

时间：2021-05-26

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

<!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:///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切换搜索引擎的导航网页搜索框实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章