jQuery帶tab切換搜索框樣式代碼



128 511 171



特效描述:tab切換 搜索框樣式,紅色的搜索框樣式,tab搜索框代碼

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

2. HTML代碼

<div class="search-form">
	<div id="search-bd" class="search-bd">
		<ul>
			<li class="selected">找商品</li>
			<li>找商家</li>
		</ul>
	</div>
	<div id="search-hd" class="search-hd">
		<div class="search-bg"></div>
		<input type="text" id="s1" class="search-input">
		<input type="text" id="s2" class="search-input">
		<span class="s1 pholder">食品酒水半價搶瘋</span>
		<span class="s2 pholder">搜商家名稱</span>
		<button id="submit" class="btn-search" value="搜索">搜索</button>
	</div>
</div>
<script type="text/javascript">
	$(function(){
		//通用頭部搜索切換
		$('#search-hd .search-input').on('input propertychange',function(){
			var val = $(this).val();
			if(val.length > 0){
				$('#search-hd .pholder').hide(0);
			}else{
				var index = $('#search-bd li.selected').index();
				$('#search-hd .pholder').eq(index).show().siblings('.pholder').hide(0);
			}
		})
		$('#search-bd li').click(function(){
			var index = $(this).index();
			$('#search-hd .pholder').eq(index).show().siblings('.pholder').hide(0);
			$('#search-hd .search-input').eq(index).show().siblings('.search-input').hide(0);
			$(this).addClass('selected').siblings().removeClass('selected');
			$('#search-hd .search-input').val('');
		});
	})
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 文本框 text文本框 選項卡自動切換 搜索框
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表