jQuery實現的類似淘寶網站搜索框樣式代碼分享
更新時間：2015年08月24日 11:23:20 投稿：lijiao
這篇文章主要介紹了類似淘寶網站搜索框樣式實現代碼，推薦給大家，有需要的小伙伴可以參考下。
運行效果圖： ----------------------查看效果-----------------------
小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的類似淘寶網站搜索框樣式代碼如下
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘寶網選項卡類型搜索框樣式代碼</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實現的類似淘寶網站搜索框樣式代碼，希望大家可以喜歡。
相關文章
jQuery EasyUI中的日期控件DateBox修改方法
下面小編就為大家?guī)硪黄猨Query EasyUI中的日期控件DateBox修改方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
本篇文章給大家總結了關于jQuery代碼優(yōu)化方法，如果你這方面有需求，跟著小編一起學習下吧。2018-01-01
jquery為我們提供了操作數組和對象的工具函數，方便和簡化了我們對它們的操作。今天我們就進入jQuery的工具函數的復習。2010-04-04
jQuery.ajax實現根據不同的Content-Type做出不同的響應
使用H5+ASP.NET General Handler開發(fā)項目，使用ajax進行前后端的通訊。有一個場景需求是根據服務器返回的不同數據類型，前端進行不同的響應，這里記錄下如何使用$.ajax實現該需求,需要的朋友可以參考下2016-11-11
在web頁面中，如果頁面較高，為了方便用戶快速地返回頂部，都會添加一個返回頂部按鈕2012-10-10
最近公司項目頁面中用到選項卡與幻燈比較多，特地寫了個集選項卡、幻燈片與播放控制于一體的插件，同頁面可多次使用。2011-03-03
頁面中經常遇到與全選相關的操作，利用jquery集成了一下，主要為了方便使用吧～2010-04-04
jQuery leonaScroll 1.1 自定義滾動條插件(推薦)
這篇文章主要介紹了jQuery leonaScroll 1.1 自定義滾動條插件(推薦)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
下面小編就為大家分享一篇jquery手機觸屏滑動拼音字母城市選擇器的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細介紹了jQuery實現淡入淡出效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08