仿淘宝TAB切换搜索框搜索切换的相关内容


Posted in Javascript onSeptember 21, 2014

一款仿淘宝TAB切换搜索框,想搜索哪方面的内容就切换到哪一个,感兴趣的朋友可以看看下面的代码

仿淘宝TAB切换搜索框搜索切换的相关内容

<div class="search">
<div id="searchBox">
<ul class="tab-bar clearfix" id="tabBar">
<li class="current" tips="请输入产品名称">商品</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="请输入产品名称">
<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>
Javascript 相关文章推荐
validator验证控件使用代码
Nov 23 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
JS随机漂浮广告代码具体实例
Nov 19 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 #Javascript
判断window.onload是否多次使用的方法
Sep 21 #Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 #Javascript
JS实现清除指定cookies的方法
Sep 20 #Javascript
JS合并数组的几种方法及优劣比较
Sep 19 #Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 #Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 #Javascript
You might like
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
JS变量及其作用域
2017/03/29 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
js中less常用的方法小结
2017/08/09 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
p5.js临摹旋转爱心
2019/10/23 Javascript
js实现随机点名程序
2020/09/17 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
朴素贝叶斯算法的python实现方法
2014/11/18 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
毕业生求职简历的自我评价
2013/10/07 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
超市商业计划书
2014/05/04 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
师德标兵事迹材料
2014/12/19 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
大学副班长竞选稿
2015/11/21 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏