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就不可以了,多个标签就不会互相干扰: 给你们个例子: //标签切换 $(' ...
随机推荐
- (转)DEDECMS 如何让栏目外部链接在新窗口中打开
近遇到一个问题,就是dedecms的导航,是用外部链接的,但是原窗口打开不好看,新窗口打开好点.OK,放狗... 1. 查找模板中的head.htm将<li><a href='[fi ...
- eclipse - 自动换行
eclipse自动换行,设置的感觉不是很好用,可以从这个网址进行更新安装: http://ahtik.com/eclipse-update/
- mysql set names.
SET NAMES utf8 相当于 SET character_set_client = utf8 --用来设置客户端送给MySQL服务器的数据的 字符集 SET character_set_res ...
- TSQL Challenge 1
在老外网站发布的一些SQL问题,拿过来自己搞一下,后面我也会陆续转载一些问题,欢迎看到的朋友贴出自己的答案,交流一哈.对于技术问答题的描述,翻译远不不原版来的更好一些,下面我就贴出原版的题目,欢迎参与 ...
- iOS开发实现登陆
Assumption假设:iOS端加载Web页,然后用户输入用户名密码登陆,WebServer会把用户登陆信息记载在Cookie.那么iOS客户端如何取到Cookie中的登陆信息. 客户端监听 NSH ...
- Qt信号槽中槽函数为虚函数的一些感想
有时候,在写connect的时候会去犹豫一个问题----我的槽函数到底需不需要为虚函数.这个问题在我每次写connect的时候我都会反问自己,因为确实,如果你不去深究里面的moc,你发现不了太多问题. ...
- java获得url里面所带参数的值
url: http://localhost:8080/test/list?p=1&d=2014 要获得所带参数p和d的值,方法如下: int p = Integer.parseInt(requ ...
- jQuery自带的一些常用方法总结
jQuery自带的一些常用方法总结 这篇文章主要介绍了jQuery自带的一些常用方法总结,包括$.trim .$.contains.$.each.$.map.$.inArray.$.extend等,需 ...
- [Python笔记]第十一篇:面向对象
以上就是本节对于面向对象初级知识的介绍,总结如下: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用 对象,根据模板创建的实例(即 ...
- Python读取Excel数据
今天一同学给我发来一个Excel文件,让我帮他找一些信息,打开一开 8000多条数据.自己手工处理是不可能完成的的啦.作为一名程序员,当然要用程序来处理.处理生活中的问题当然是Python最为方便啦. ...