百度谷歌必應搜狗知乎 可切換搜索框的實現

緣起

如題，今天幫一個朋友寫搜索框，本來以爲網上應該能搜索到大量現成代碼，沒想到並沒有找到（可能是我的搜索詞不合適），所以就寫篇文章記錄下代碼，分享出來以便於網友們學習使用。

---

先看下效果：

預覽

電腦

手機

代碼

	<div class="container">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous">
		<style>
	.hidden{
    	display: none;
    	}
	.container{
		width:auto;
		text-align: center;
	}
	.searchlabel{
		padding:7px 10px;
		font-weight: bold;
	}
	.nsearchlabel,.searchlabel:hover{
		padding:7px 10px;
		background:#fff;
		font-weight: bold;
		border-radius:3px;
		
	}
	label,.sspan{
		font-size: 15px;
		margin: 0;
		padding: 0;
	}
    .sq{
        margin:0 35%;
       text-align: left;
       white-space:nowrap;
    }
    .sq2{
        margin:0;
    	text-align: center;
       	display: inline-block;
       	white-space:nowrap;
       	background:#fff;
        border-radius:30px;
    	width:50vw;
    }
    .search{
    	font-size:15px;
    	line-height:20px;
    	height:50px;
    }
    .btn{
    	margin: 10px 3px 10px 7px;
    	height:35px;
    	width:10%;
    	background: #fe4365;
    	border-radius:20px;
    	color:#fff;
    }
    .btn i{
    	font-size: 18px;
    }
    .btn:hover{
    	color:#fff;
    	background: #e77e91
    }
    input{
    	background: translate;
    	margin: 15px 0;
    	padding: 0 0 0 15px;
    	width:85%;
    	border:none;
    	color:#9f9f9f;
    	outline:none;
    }
    @media screen and (max-width: 40em) {
    
    	.container{
    	margin: 0 0 0 -2.5vw;
		width:90vw;
		}
    	.sq{
    		margin: 0 5%;
    		overflow:scroll;
    		width:65vw;
    	}
    	.sq2{
    		margin: 0 0 0 -5vm;
    		width: 100%;
    		border-radius:25px;
    	}
    	.btn{
    		width:5em;
    		margin: 0 0 0 -10vw;
    	}
    	.input{
    		width: 100%;
    	}
    }
</style>
<div class="sq">
				<span class="sspan">搜索 > </span>
				<label class="nsearchlabel" data-target="baidu-search"><span>百度</span></label>
				<label class="searchlabel" data-target="google-search"><span>谷歌</span></label>
				<label class="searchlabel" data-target="sougou-search"><span>搜狗</span></label>
				<label class="searchlabel" data-target="bing-search"><span>必應</span></label>
				<label class="searchlabel" data-target="zhihu-search"><span>知乎</span></label>
			
</div>
<div class="sq2">
					<form class="search" id="baidu-search" action="https://www.baidu.com/s" method="get" target="_blank">
						<input placeholder="百度一下" type="text" name="wd" autocomplete="off" autofocus="autofocus"  value="">
						<button type="submit" name="submit" class="btn">
						<i class="fa fa-search"></i>
						</button>
					</form>
					
					<form class="search hidden" id="google-search" action="https://www.google.com/search" method="get" target="_blank">
						<input  placeholder="谷歌搜索" type="text" name="q" autocomplete="off" autofocus="autofocus" value="">
						<button type="submit" name="submit" class="btn">
						<i class="fa fa-search"></i>
						</button>
					</form>
					
					<form class="search hidden" id="sougou-search" action="https://www.sogou.com/web" method="get" target="_blank">
						<input placeholder="搜狗搜索" type="text" name="query" autocomplete="off" autofocus="autofocus"  value="">
						<button type="submit" name="submit" class="btn">
						<i class="fa fa-search"></i>
						</button>
					</form>
					
					<form class="search hidden" id="bing-search" action="https://cn.bing.com/search?" method="get" target="_blank">
						<input placeholder="Bing搜索" type="text" name="q" autocomplete="off" autofocus="autofocus"  value="">
						<button type="submit" name="submit" class="btn">
						<i class="fa fa-search"></i>
						</button>
					</form>
					
					<form class="search hidden" id="zhihu-search" action="https://www.zhihu.com/search" method="get" target="_blank">
						<input placeholder="知乎搜索" type="text" name="q" autocomplete="off" autofocus="autofocus"  value="">
						<button type="submit" name="submit" class="btn">
						<i class="fa fa-search"></i>
						</button>
					</form>
					
				</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script>
    $("div").on("click","label",function(){
    	$("div label").each(function(){
    		$(this).attr("class","searchlabel");
    	});
    	$(this).attr('class','nsearchlabel');
		var id=$(this).attr("data-target");
		$("div form").each(function(){
			$(this).addClass("hidden");	
		});
		$("#"+id).removeClass("hidden");
		});
	
    </script>

注意，這裏只是筆者在webstack中加入搜索框的代碼，如果是在其他環境下使用請自行調整佈局。

建了個QQ羣，歡迎志同道合滴朋友們來閒聊
1054735139