仿淘宝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 相关文章推荐
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 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
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
Bootstrap Table使用整理(一)
2017/06/09 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
python中Genarator函数用法分析
2015/04/08 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
python ChainMap的使用和说明详解
2019/06/11 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Django REST framwork的权限验证实例
2020/04/02 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
精细化工应届生求职信
2013/11/17 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers