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就不可以了,多个标签就不会互相干扰: 给你们个例子: //标签切换 $(' ...
随机推荐
- XlFileFormat
-----转载:http://hi.baidu.com/liu_haitao/item/900ddb38979188c22f8ec26e 18 XlFileFormat.xlAddIn Microso ...
- 关于IO学习的几个函数
这是最近学到的几个关于IO文件操作的几个小算法,今天总结出来. 1. 删除一个给定的目录,这上目录不为空目录,使用递归来实现 public void test04(File file) { File[ ...
- 各版本 linux(转)
Linux各种版本下载 ftp://ftp.linuxforum.net/ISO/Redhat7.3/valhalla-i386-disc1.iso ftp://ftp.linuxforum.net/ ...
- [转帖]AVS音视频编解码技术了解
AVS高清立体视频编码器 电视技术在经历了从黑白到彩色.从模拟到数字的技术变革之后正在酝酿另一场技术革命,从单纯观看二维场景的平面电视跨越到展现三维场景的立体电视3DTV.3DTV系统的核心问题之一是 ...
- 苹果新政,禁止开发者在App中加入检查更新功能
今天妥妥的被拒了,苹果更新了新政策,不能在应用中出现检测更新的功能.AppStore会自动提醒用户更新. 去掉更新按钮,之后再尝试下看能通过不能
- 设置windows窗口ICON 【windows 编程】【API】【原创】
1. ICON介绍 最近开始接触windows 编程,因此将自己所接触的一些零散的知识进行整理并记录.本文主要介绍了如何更改windows对话框窗口的ICON图标.这里首先介绍一下windows IC ...
- 当OOP语言RAII特性发展到functional形式的极致
本文主要站在C++程序员的思维角度思量. functional之路 lambda表达式 lambda表达式,是一段代码片段.函数实现体中出现的可重用的代码块. 在C++之前,C语言最小可复用流程模块, ...
- ios 中获得应用程序名称和版本号
IOS程序中的应用名称和版本号在 info.plist 文件中存储着,要想在程序中获得需要使用 NSBundle 对象 下面是示例代码: NSBundle *bundle = [NSBundle ma ...
- 自动Telnet远程登陆命令
有些时候,在面对开发机的时候,不断的telnet和不断的command自己的命令确实非常麻烦,需要一些自动测试或者自动部署的需求.然而面对telnet很多同学都跟我一样一开始觉得无法通过管道等传用户名 ...
- N3292x IBR介绍
N3292x IBR介绍 1 IBR启动流程 图1-1 IBR启动流程 CHIP_CFG[0] Mode 0 Boot from IBR Recovery Mode with crystal inpu ...