这篇文章主要介绍了javascript切换搜索引擎的导航网页搜索框的实例代码，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下

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

#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;

}

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";

}

}