jQuery實現(xiàn)的類似淘寶網(wǎng)站搜索框樣式代碼分享

更新時間：2015年08月24日 11:23:20 投稿：lijiao

這篇文章主要介紹了類似淘寶網(wǎng)站搜索框樣式實現(xiàn)代碼，推薦給大家，有需要的小伙伴可以參考下。

運行效果圖： ----------------------查看效果-----------------------

小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的類似淘寶網(wǎng)站搜索框樣式代碼如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘寶網(wǎng)選項卡類型搜索框樣式代碼</title>

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
 $(".bodys p").not(":first").hide();
 $(".searchbox ul li").mouseover(function(){
 var index = $(this).index();
 if(index==0){
 $(this).find("a").addClass("style1");
 $("li").eq(1).find("a").removeClass("style2");
 $("li").eq(2).find("a").removeClass("style3");
 }
 if(index==1){
 $(this).find("a").addClass("style2");
 $("li").eq(0).find("a").removeClass("style1");
 $("li").eq(2).find("a").removeClass("style3");
 }
 if(index==2){
 $(this).find("a").addClass("style3");
 $("li").eq(0).find("a").removeClass("style1");
 $("li").eq(1).find("a").removeClass("style2");
 }
 var index=$(this).index();
 $(".bodys p").eq(index).show().siblings().hide();
 });
});
</script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}

/* searchbox */
.searchbox{width:520px;height:80px;margin:40px auto 0 auto;}
.searchbox ul{ height:35px; width:500px; list-style:none; margin-left:20px}
.searchbox ul li{ float:left}
.searchbox ul li a{ float:left; line-height:35px; padding:0 20px; text-decoration:none; color:#000; font-size:14px; font-weight:bold;}
.searchbox ul li .style1{ background-color:#000; color:#fff}
.searchbox ul li .style2{ background-color:#f00;color:#fff}
.searchbox ul li .style3{ background-color:#F90;color:#fff}
.bodys input{ height:30px;line-height:30px;width:390px;padding:0 10px;float:left;}
.bodys .one{ border:#000 3px solid}
.bodys .two{ border:#f00 3px solid}
.bodys .three{ border:#F90 3px solid}
.bodys .one1{ background-color:#000; }
.bodys .two2{ background-color:#f00;}
.bodys .three3{ background-color:#F90;}
.bodys button{float:left;border:0;height:36px;width:100px; color:#FFF; line-height:36px;text-align:center;overflow:hidden;}
</style>

</head>

<body>

<div class="searchbox">
 <ul class="border1">
 <li><a href="#" class="style1">寶貝</a></li>
 <li><a href="#">天貓</a></li>
 <li><a href="#">店鋪</a></li>
 </ul>
 <div class="bodys">
 <p><input type="text" value="" id="" class="one" placeholder="輸入寶貝" /><button class="one1">搜索</button></p>
 <p><input type="text" value="" id="" class="two" placeholder="輸入寶貝" /><button class="two2">搜索</button></p>
 <p><input type="text" value="" id="" class="three" placeholder="輸入店鋪" /><button class="three3">搜索</button></p>
 </div>
</div> 

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

以上就是為大家分享的jQuery實現(xiàn)的類似淘寶網(wǎng)站搜索框樣式代碼，希望大家可以喜歡。

您可能感興趣的文章: