仿淘寶TAB切換搜索框搜索切換的相關(guān)內(nèi)容
更新時間：2014年09月21日 10:22:23 投稿：whsnow
這是一款仿淘寶TAB切換搜索框，想搜索哪方面的內(nèi)容就切換到哪一個，非常實(shí)用，喜歡的朋友可以看看
一款仿淘寶TAB切換搜索框，想搜索哪方面的內(nèi)容就切換到哪一個，感興趣的朋友可以看看下面的代碼
<div class="search"> <div id="searchBox"> <ul class="tab-bar clearfix" id="tabBar"> <li class="current" tips="請輸入產(chǎn)品名稱">商品</li> <li class="tab-line"><span>|</span></li> <li tips="請輸入店鋪名稱">店鋪</li> </ul> <div class="tab-box clearfix" id="tabBox"> <form onsubmit="" action="" method="get" name="searchForm" id="searchForm" class="clearfix"> <input class="text" id="keyword" name="keyword" lang="zh-CN" type="text" value="請輸入產(chǎn)品名稱"> <input class="button" value="搜索" onfocus="this.blur()" type="submit"> </form> </div> </div> <div class="keyword"> <a href="#"><span>男裝</span></a> <a href="#"> 朵牧女鞋</a> <a href="#">圣高男鞋</a> <a href="#"><span>女裝</span></a> <a href="#">防曬霜</a> <a href="#">脫毛膏</a> </div> </div>
.search{ position: absolute; top:14px; left: 34%; width:477px; _width:477px; height: 81px;}
.keyword a{ font-size: 12px; line-height: 18px; color:#999; padding:0 4px;}
.keyword a span{ color:#fb5004;}
.tab-bar li.current{ color: #1d7ad9; font-weight: bold; background: url(../images/trian_up.png) no-repeat center bottom; padding-bottom: 9px;}
.tab-bar li{ width:38px; text-align: center; color: #444; float: left; cursor: pointer;}
.tab-bar li.tab-line{ width: 2px; color: #c9c9c9; margin:0 2px;}
.tab-box{ border:2px solid #1d7ad9;}
.text{ color: #a9a9a9; width:376px; height: 31px; border:none; text-indent: 10px; float:left; outline: none; border:0;}
.button{ width: 97px; height: 32px; text-align: center; color: #fff; font-size:18px; background: #1d7ad9; border:none; float: left;}
<script type="text/javascript">
$(function(){
// 搜索切換
$('#tabBar').on('click', 'li', function(){
var tips = $(this).attr('tips');
if(tips){
$(this).addClass('current').siblings().removeClass('current');
$('#keyword').val(tips);
}
});
</script>
您可能感興趣的文章:
相關(guān)文章
Bootstrap select多選下拉框?qū)崿F(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap select多選下拉框?qū)崿F(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下代碼2016-12-12
json屬性名為什么要雙引號？更加規(guī)范,利于解析、避免class等關(guān)鍵字引起的不兼容問題,需要的朋友可以參考下2014-07-07
JavaScript 一行代碼,輕松搞定浮動快捷留言-V2升級版
前天熬了大半宿發(fā)了一篇[一行代碼輕松搞定快捷留言功能]，同時發(fā)布了V1.0beta版的快捷留言功能和源代碼，之所以是beta版，就是當(dāng)時感覺雖然基本功能有了，但是還不夠完善，特性也不一定合理2010-04-04
Javascript類型系統(tǒng)之undefined和null淺析
這篇文章主要介紹了Javascript類型系統(tǒng)之undefined和null的知識，通過本文還簡單給大家介紹了javascript中null和undefined的區(qū)別的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
靜態(tài)的動態(tài)續(xù)篇之來點(diǎn)XML
靜態(tài)的動態(tài)續(xù)篇之來點(diǎn)XML...2006-08-08
Three.js是一個JavaScript庫,用于在Web瀏覽器中創(chuàng)建3D Web圖形,下面這篇文章主要給大家介紹了關(guān)于three.js安裝和使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
這篇文章主要介紹了js實(shí)現(xiàn)照片墻功能的方法,以一個完整實(shí)例形式分析了js實(shí)現(xiàn)照片墻的css與js的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
JavaScript 輪播圖和自定義滾動條配合鼠標(biāo)滾輪分享代碼貼
本文給大家分享一段js輪播圖和自定義滾動條的代碼片段，布局和樣式小編沒給大家多介紹，大家可以根據(jù)個人需求優(yōu)化，具體實(shí)現(xiàn)代碼，大家可以參考下面代碼片段2016-10-10
this是Javascript語言的一個關(guān)鍵字它代表函數(shù)運(yùn)行時，自動生成的一個內(nèi)部對象，只能在函數(shù)內(nèi)部使用,下面分四種情況，詳細(xì)討論this的用法，感興趣的朋友可以了解下2013-09-09
網(wǎng)頁與鍵盤...2006-07-07