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

一款仿淘宝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>

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索切换
, tab
搜索框
javascript tab 切换、仿淘宝tab切换搜索框、javascript tab、javascript tab页、javascript tab选项卡,以便于您获取更多的相关知识。

时间: 2024-09-26 23:05:09

仿淘宝TAB切换搜索框搜索切换的相关内容_javascript技巧的相关文章

JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集_javascript技巧

本文实例讲述了JS实现的仿东京商城菜单.仿Win右键菜单及仿淘宝TAB特效.分享给大家供大家参考.具体如下: 这是一个非常好的实用菜单整合特效,有多级下拉菜单.仿东京商城的拉出式菜单.仿Windows的右键菜单,仿淘宝的标签Tab菜单,每一个都是精彩,代码中附有丰富的注释,便于你的学习和修改. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-jd-taobao-win-rbutton-tab-demo/ 具体代码如下: <!DOCTYP

jQuery仿淘宝、百度、google 搜索提示功能

本案例采用jquery实现动态搜索显示功能,只要输入值就能立刻动态显示数据,不同于常规查询方法. 模拟效果如下: 1. 2.                          <%@ page language="java" pageencoding="utf-8"%><!doctype html public "-//w3c//dtd html 4.01 transitional//en"><html><

使用Bootstrap typeahead插件实现搜索框自动补全的方法_javascript技巧

这就是贴代码的坏处之一:搜索框快被网友玩儿坏了!!!有故意输入空格的,有输入or 1=1的,有alert的,有html乱入的.......而且好像还在玩儿,随他们去吧,只要开心就好. 在项目中,经常会用到输入框的自动补全功能,就像百度.淘宝等搜索框一样:当用户输入首字母.关键词时,后台会迅速将与此相关的条目返回并显示到前台,以便用户选择,提升用户体验.当然本项目的补全功能和这些大厂的技术是没有可比性的,但用于站内搜索也是绰绰有余了. 接触到的自动补全插件主要有两个:autocomplete和ty

javascript实现类似于新浪微博搜索框弹出效果的方法_javascript技巧

本文实例讲述了javascript实现类似于新浪微博搜索框弹出效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

JavaScript实现搜索框的自动完成功能(一)_javascript技巧

在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 先给大家展示下效果图: 实现这个功能需要服务端配合.客户端通过脚本来展示从服务端取得的数据. 先看客户端的HTML: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT

求 商品规格选择-求JQ或JS仿淘宝商品详情选择规格颜色等功能

问题描述 求JQ或JS仿淘宝商品详情选择规格颜色等功能 选择要求:有几个属性,如 尺寸和颜色,尺寸:M.L.XL.XXL 等,颜色:黑色.白色.黄色.红色等,其每个属性都有关联,如 首选M,颜色除黑色或其他外都能选择:如首选 黄色,尺寸除XXL或其他外都能选择. 自己写的有问题.代码放上一部分.已生成的数组求值. HTML:↓ <div class="sys_item_spec"> <dl class="clearfix iteminfo_parameter

asp.net母版页如何仿淘宝导航与搜索

问题描述 asp.net母版页如何仿淘宝导航与搜索 ## 用母版页完成以下效果 下图圈圈内容**** 解决方案 母版页和一般网页也没有区别,插入你的代码,以及放入placeholder放你的内容页就可以了

jquery仿淘宝电器城图片幻灯切换效果

先看看效果图片 代码分析 css文件 只要保存成css文件  代码如下 复制代码 ul,li{margin:0;padding:0;} img{border:none;} ul li{list-style:none;} #idSlider,#idSlider img{width:480px;height:280px;} #idSlider{overflow:hidden;position:relative;} #taobaolike{position:relative;width:480px;h

jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例_jquery

本文实例讲述了jQuery实现仿淘宝带有指示条的图片转动切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery仿淘宝带有指示条的图片转动切换结果</title> <style type="text/css"> * {  padd