仿淘宝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 Autocomplete 结合asp.net使用要点
Oct 29 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
js中this用法实例详解
May 05 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
12个提高JavaScript技能的概念(小结)
May 09 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 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
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
JS实现图片切换特效
2019/12/23 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
python绘图方法实例入门
2015/05/19 Python
你应该知道的python列表去重方法
2017/01/17 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
Python3.8中使用f-strings调试
2019/05/22 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
python数据爬下来保存的位置
2020/02/17 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
C#笔试题
2015/07/14 面试题
生物科学专业个人求职信范文
2013/12/07 职场文书
单位人事专员介绍信
2014/01/11 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
学期个人工作总结
2015/02/13 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
python 提取html文本的方法
2021/05/20 Python
Redis可视化客户端小结
2021/06/10 Redis
Python开发五子棋小游戏
2022/04/28 Python