1.HTML代码：
2.JS代码：
function searchBox() { var Search = document.getElementsByClassName('search'); var Goods = Search.getElementsByClassName('goods'); var Tmall = Search.getElementsByClassName('tmall'); var Store = Search.getElementsByClassName('store'); var Box_1 = Search.getElementsByClassName('box-1'); var Box_2 = Search.getElementsByClassName('box-2'); var Box_3 = Search.getElementsByClassName('Box_3'); var Text = Search.getElementsByClassName('text'); var val = null; //设置空指针对象 Text[0].focus(); //初始化获取焦点 //切换导航 Goods.onclick = function() { addClass(Goods, 'active'); removeClass(Tmall, 'active'); removeClass(Store, 'active'); Goods.style.display('block'); Tmall.style.display('none'); Store.style.display('none'); Text[0].focus(); Text[0].value = val; if( Text[0].value != ' ' ) { Text[0].style.background = '#fff'; } else { Text[0].style.background = 'url(需要的背景文字图) no-repeat top left'; } } Tmall.onclick = function() { addClass(Tmall, 'active'); removeClass(Goods, 'active'); removeClass(Store, 'active'); Tmall.style.display = 'block'; Goods.style.display = 'none'; Store.style.display = 'none'; Text[1].focus(); Text[1].value = val; if (Text[1].value != ' ') { Text[1].style.background = '#fff'; } else { Text[1].style.background = 'url(指定文字背景图片或者插入文字) no-repeat top left'; } } Store.onclick = function() { addClass(Store, 'active'); removeClass(Goods, 'active'); removeClass(Tmall, 'active'); Store.style.display = 'block'; Goods.style.display = 'none'; Tmall.style.display = 'none'; Text[2].focus(); Text[2].value = val; if (Text[2].value != ' ') { Text[2].style.background = '#fff'; } else { Text[2].style.background = 'url()'; } } //当有文字输入，清除对话框中的默认背景 //index 属性可返回下拉列表中选项的索引位置。 //onkeyup 事件会在键盘按键被松开时发生。 for (var i = 0; i < Text.length; i++) { Text[i].onkeyup =function() { if (this.value != ' ') { val = this.value; this.style.background = '#fff'; } else { val = this.value; if (this.index == 0 ) { this.style.background = 'url(1)'; } else if (this.index == 1 ) { this.style.background = 'url(2)'; } else { this.style.background = 'url(3)'; } } } } //添加类名函数function addClass(obj, newClass) { var oldClass = obj.className; if (oldClass == '') { obj.className = newClass; return false; } var arr = oldClass.split(" "); for (var i = 0; i < arr.length; i++) { if (arr[i] == newClass) { return false; } } arr.push(newClass); obj.className = arr.join(" ");}//删除类名函数function removeClass(obj, old) { var oldClass = obj.className; var arr = oldClass.split(" "); for (var i = 0; i < arr.length; i++) { if( arr[i] == old ) { arr.splice(i,1) break; } } obj.className = arr.join(" ");}} 知识：
focus()： 初始化获取焦点；
split( ) ：基于指定的分隔符将一个字符串分割成多个子字符串，并将结果（逗号隔开）放入一个数组中。
join( ) ：将数组变为字符串，每个元素以指定样式隔开。
splice（）： 删除：splice（0， 2）； 从数组第一项的位置开始， 删除两项。
插入：splice（2， 0， "red", "green"）；从数组的第三项，删除零项，插入red ， green 字符串。
替换：splice（2， 1， "red" )； 把数组的第三项用red 替换。