jQuery實(shí)現(xiàn)的類似淘寶網(wǎng)站搜索框樣式代碼分享
更新時(shí)間：2015年08月24日 11:23:20 投稿：lijiao
這篇文章主要介紹了類似淘寶網(wǎng)站搜索框樣式實(shí)現(xiàn)代碼，推薦給大家，有需要的小伙伴可以參考下。
運(yùn)行效果圖： ----------------------查看效果-----------------------
小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
為大家分享的類似淘寶網(wǎng)站搜索框樣式代碼如下
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘寶網(wǎng)選項(xià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實(shí)現(xiàn)的類似淘寶網(wǎng)站搜索框樣式代碼，希望大家可以喜歡。
您可能感興趣的文章:
- 基于jquery的仿百度搜索框效果代碼
- Jquery帶搜索框的下拉菜單
- CSS3,HTML5和jQuery搜索框集錦
- jQuery EasyUI API 中文文檔 搜索框
- Jquery實(shí)現(xiàn)搜索框提示功能示例代碼
- jquery 模擬類搜索框自動(dòng)完成搜索提示功能(改進(jìn))
- jQuery 插件仿百度搜索框智能提示(帶Value值)
- jquery+php實(shí)現(xiàn)搜索框自動(dòng)提示
- JQUERY 實(shí)現(xiàn)窗口滾動(dòng)搜索框停靠效果(類似滾動(dòng)?？?
- jQuery搜索框效果實(shí)現(xiàn)代碼(百度關(guān)鍵詞聯(lián)想)
相關(guān)文章
Jquery實(shí)現(xiàn)仿騰訊微博發(fā)表廣播
閑來無事做的一個(gè)Jquery實(shí)現(xiàn)仿騰訊微博發(fā)表廣播的特效，功能和樣子實(shí)現(xiàn)了，由于樣式是渣渣，所以小伙伴們想直接用的話，還得自己美化下2014-11-11
jQuery實(shí)現(xiàn)的兼容性浮動(dòng)層示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的兼容性浮動(dòng)層,可兼容IE、火狐等主流瀏覽器,涉及jQuery針對頁面元素的運(yùn)算與屬性的動(dòng)態(tài)設(shè)置相關(guān)技巧,需要的朋友可以參考下2016-08-08
jQuery實(shí)現(xiàn)的跨容器無縫拖動(dòng)效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的跨容器無縫拖動(dòng)效果代碼,可實(shí)現(xiàn)容器的任意添加與拖動(dòng)功能,涉及jQuery UI插件的使用技巧,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了jQuery中size()方法用法,實(shí)例分析了size()方法返回對象集合中元素?cái)?shù)目的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jquery 簡單圖片導(dǎo)航插件jquery.imgNav.js
前幾天某MM要偶幫忙實(shí)現(xiàn)栗子汀首頁的圖片導(dǎo)航效果，很簡單而且具有通用性的一個(gè)需求，點(diǎn)圖片A切換圖片A相關(guān)的內(nèi)容，點(diǎn)圖片B切換圖片B相關(guān)的內(nèi)容，僅此而已。2010-03-03
Jquery 自定義事件實(shí)現(xiàn)發(fā)布/訂閱的簡單實(shí)例
下面小編就為大家?guī)硪黄狫query 自定義事件實(shí)現(xiàn)發(fā)布/訂閱的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
本來不想寫成ＪＱ的插件的，不過貌似不用ＪＱ的話，引用起來沒有這么方便。以前也寫過一些小小的ＪＳ方法，但是寫ＪＱ插件是第一次2011-11-11
首先聲明這2個(gè)無刷新級聯(lián)下拉框的jquery插件完全是自己原創(chuàng)的，經(jīng)過嚴(yán)格的測試，正確使用不會(huì)出現(xiàn)bug2011-10-10
這篇文章主要為大家分享了7個(gè)jQuery最佳實(shí)踐，在使用JavaScript庫的時(shí)候，有哪些最佳實(shí)踐，又有哪些不好的實(shí)踐呢？感興趣的小伙伴們可以參考一下2016-01-01
這個(gè)跨域異步上傳功能我們借助了Jquery.form插件。接下來通過本文給大家介紹jQuery跨域異步上傳文件的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧2016-04-04