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就不可以了,多个标签就不会互相干扰: 给你们个例子: //标签切换 $(' ...
随机推荐
- js的异步的问题的再次理解
*js是实实在在的单线程语言,在一小个时刻,在(js的执行对列)只有一个执行,一个没有完,另一个必须等待,什么都不做,只有抖着腿的等; *本来语言本身是同步的,之所以是异步执行,是因为在浏览器环境中, ...
- php 简单连接数据库的操作
<?php /** * TestGuest Version1.0 * ================================================ * Copy 2010-2 ...
- linux下系统定时任务配置----crontab(mysql定时备份)
crontab命令用于设置周期性被执行的指令,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程,crond进程每分钟会定期检查是否有要执行的任 ...
- hdu1230火星A+B (大数题)
Problem Description 读入两个不超过25位的火星正整数A和B,计算A+B.需要注意的是:在火星上,整数不是单一进制的,第n位的进制就是第n个素数.例如:地球上的10进制数2,在火星上 ...
- 可以让PHP编程事半功倍的类库
在用php开发网站的时候,使用面向对象的方法确实可以提高代码复用率,减少代码冗余.而对初学者更友好的是,PHP开发网站所需要的大部分类库,网上都有十分优秀的类库存在了.作为一个程序猿当然不能重复制造轮 ...
- 如何让Hadoop运行得更快一些
在数据处理方面,我们发现数据输入速度一般要比的数据处理速度快很多,这种现象在大多数据领域尤为明显.随着数据不断膨胀,相应的响应时间自然要有所增加,数据处理的复杂度也在不断提高.作为一个开发者,我们自然 ...
- 『重构--改善既有代码的设计』读书笔记----Inline Temp
与Inline Method相同,有时候犹豫需要Extract Method,需要对一些临时变量进行内联,而这个往往是Replace Temp with Query的一部分.简单来说,当你看到这种 d ...
- 关于highcharts(功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库)
官网http://www.hcharts.cn/ 引入下列文件 <script type="text/javascript" src="http://cdn.hch ...
- 《asp.net mvc3 高级编程》第三章 视图
一.视图的作用 视图的职责是向用户提供界面.从ASP.NET MVC3开始,视图数据也可以通过ViewBag属性访问.例如:ViewBag.Message 就等于ViewData["Mess ...
- Linux命令——创建删除文件
创建文件夹 mkdir filename 进入目录文件 cd filename 返回上一级目录 cd ..返回多级目录 cd ../../.. (../表示一级) 创建文件 touch filen ...