jquery切换tab标签例子
之前做了一个简单的小效果,使用jquery方式,让tab标签切换,效果如下


代码其实很简单,首先先把代码分享给大家,代码如下
var shoptoggle = $('.shoptoggle .shop-toggle li');
var shopwrap = $('div.shop-wrap'); $('div.shop-wrap:first-child+div.shop-wrap').hide(); $('#Sshop-wrap').hide(); var link=$('div.details-link') var goog=$('div.goods-img') shoptoggle.click(function () { var $this = $(this); var $t = $this.index(); shoptoggle.removeClass(); $this.addClass('shop-cur'); shopwrap.css('display', 'none'); link.css('display', 'none'); goog.css('display', 'none'); shopwrap.eq($t).css('display', 'block'); link.eq($t).css('display', 'block'); goog.eq($t).css('display', 'block');
}
大致解释下代码 前面几行主要是选择器的选择,从第3行先将对应的选择器隐藏掉
shoptoggle这个选择器中,对应的操作切换的工作,比如先让右边的隐藏,当点击右边的时候,左边的隐藏,基本效果已经在上面的截图,我也在这些记录,以方便大家学习
jquery切换tab标签例子的更多相关文章
- Python3从零开始爬取今日头条的新闻【四、模拟点击切换tab标签获取内容】
Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...
- jQuery实现tab标签切换效果
技巧一.jQuery :eq() 选择器 定义和用法 :eq() 选择器选取带有指定 index 值的元素. index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1). 经常与其 ...
- jquery ui tab标签
<!DOCTYPE html> <html> <head> <title>tab</title> <style type=" ...
- jQuery蓝色修边tab标签切换
jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...
- jquery实现tab切换完整代码
代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- JS特效之Tab标签切换
在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...
- 多iframe使用tab标签方式添加、删除、切换的处理实例
紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案 如果采用iframe来切换显示内容的方式来展现办公Web.那么需要解决几个问题 1.tab标签需要和显示的iframe ...
- 很好用的Tab标签切换功能,延迟Tab切换。
一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...
- 一个页面tab标签切换,都有scroll事件的解决办法
当前页有多个tab,如果都有scroll事件, 先解绑$(window).off('scroll') 再执行scroll就不可以了,多个标签就不会互相干扰: 给你们个例子: //标签切换 $(' ...
随机推荐
- ie下面兼容性问题的一些总结
最后一次搞ie兼容性问题,以后都可以不管了0.0 1.浮动兼容性 1.1IE6下的双边距BUG 在IE6下,块元素有浮动和横向margin的时候,最边上元素的横向margin值会被放大成两倍 解决办法 ...
- 编写高效SQL最佳实践
编写高效 SQL 语句的最佳实践 秦玮, 高级软件工程师, IBM 王广成, 软件工程师, IBM 王韵婷, 高级软件工程师, IBM 简介: 本文列举了一些在编写 SQL 查询语句时可能导致 DB2 ...
- 抓取锁的sql语句-第二次修改
CREATE OR REPLACE PROCEDURE SOLVE_LOCK AS V_SQL VARCHAR2(3000); --定义 v_sql 接受抓取锁的sql语句 CUR_LOCK SYS ...
- Web学习资源及手册查询整理
入门了解html.css.js.jQuery:http://www.w3school.com.cn/, bootstrap.nodejs.php.jQuery入门:http://www.runoob. ...
- SqlServer CTE 递归查询 Oracle递归查询
在做数据库设计这块,很多时候表的数据模型就是典型的二叉树结构. 于是在查询数据的时候,就涉及到了数据的递归查询. 递归查询分为两种:1.从根节点查询自身以及所有的子节点:2.从子节点查询自身以及所有的 ...
- Jquery学习笔记1-jquery总体代码框架
第一次在博客中记录自己的笔记,希望能坚持下去吧,加油! 今天学习的是Jquery的源代码,官网上下载,然后使用DW(dream waver)编辑器打开Js(下载的是未压缩版),版本是2.0.3.第一次 ...
- Lang语言包
\languages\zh_cn\admin\common.php里配置后台所有常量
- js ie浏览器下的选中操作
最近在学习jquery 好多英文网站,制作一个网站的副本,可以主动地学习.好像给自己的网站添加一个小词典,就像沪江小d那样. js试了好几种方法 实在不行,网上搜索了下 ,用到了浏览器开发.本篇文章 ...
- delphi 创建数据库配置文件(TIniFile)
一.有必要了解INI文件的结构: ;注释 [小节名] 关键字=值 ... ---- INI文件允许有多个小节,每个小节又允许有多个关键字, “=”后面是该关键字的值. ---- 值的类型有三种:字符串 ...
- C#笔记(Hex转JPG)
由于最近需要用SD卡记录摄像头拍的图像,记录的文件格式十六进制的(例如:0xf0就是对应图像中的八个像素点)需要做一个SD卡上位机来将十六进制文件转换成JPG图像格式,方便对图像的分析. 总体的思路是 ...