jQuery带tab切换搜索框样式代码



123 489 164



特效描述: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

加群请备注:从官网了解到