可切换搜索引擎的导航网页搜索框，可以换百度、谷歌、搜狗不同的搜索方式

最新推荐文章于 2024-06-28 20:09:35 发布

天南韩立

最新推荐文章于 2024-06-28 20:09:35 发布

阅读量7.5k

点赞数 1

分类专栏： JavaScript HTML 文章标签：搜索框 html js 切换搜索引擎

本文链接：https://blog.csdn.net/u014175572/article/details/49358637

版权

JavaScript 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

HTML

23 篇文章 1 订阅

订阅专栏

可切换搜索引擎的导航网页搜索框，可以换百度、谷歌、搜狗不同的搜索方式

效果图如下：

代码如下：

<!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 src="image/search_mark/1_wangye_baidu.gif" /></li>
							<li style="display:none;"><img src="image/search_mark/1_wangye_google.gif" /></li>
							<li style="display:none;"><img src="image/search_mark/1_wangye_sougou.gif" /></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='1'" onMouseOut="this.style.opacity='0.7'" />
						</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='1'" onMouseOut="this.style.opacity='0.7'" />
						</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='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>

源码以及图片下载地址：http://download.csdn.net/detail/u014175572/9205821