之前做了一个简单的小效果,使用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标签例子的更多相关文章

  1. Python3从零开始爬取今日头条的新闻【四、模拟点击切换tab标签获取内容】

    Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...

  2. jQuery实现tab标签切换效果

    技巧一.jQuery :eq() 选择器 定义和用法 :eq() 选择器选取带有指定 index 值的元素. index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1). 经常与其 ...

  3. jquery ui tab标签

    <!DOCTYPE html> <html> <head> <title>tab</title> <style type=" ...

  4. jQuery蓝色修边tab标签切换

    jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...

  5. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  6. JS特效之Tab标签切换

    在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...

  7. 多iframe使用tab标签方式添加、删除、切换的处理实例

    紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案 如果采用iframe来切换显示内容的方式来展现办公Web.那么需要解决几个问题 1.tab标签需要和显示的iframe ...

  8. 很好用的Tab标签切换功能,延迟Tab切换。

    一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...

  9. 一个页面tab标签切换,都有scroll事件的解决办法

    当前页有多个tab,如果都有scroll事件, 先解绑$(window).off('scroll') 再执行scroll就不可以了,多个标签就不会互相干扰: 给你们个例子: //标签切换    $(' ...

随机推荐

  1. Ajax 如何提交集合到mvc后台

    1,前端请求如下 var apply = { CompanyName: $("[name='corpName']").val(), ContactUser: $("[na ...

  2. 编写高效SQL最佳实践

    编写高效 SQL 语句的最佳实践 秦玮, 高级软件工程师, IBM 王广成, 软件工程师, IBM 王韵婷, 高级软件工程师, IBM 简介: 本文列举了一些在编写 SQL 查询语句时可能导致 DB2 ...

  3. 把某个asp.net 控件 替换成 自定义的控件

    功能:可以把某个asp.net 控件 替换成 自定义的控件 pages 的 tagMapping 元素(ASP.NET 设置架构) 定义一个标记类型的集合,这些标记类型在编译时重新映射为其他标记类型. ...

  4. SVN的使用(转发)

    http://my.oschina.net/joanfen/blog/194491?fromerr=LM5QY3YF

  5. 读书笔记 |Google C++编程风格指南

    Google C++编程风格指南 ## 0. 背景 每一个C++程序员都知道,C++具有很多强大的语言特性,但这种强大不可避免的导致它的复杂,这种复杂会使得代码更易于出现bug.难于阅读和维护. 本指 ...

  6. android 05

    控件:RadioButton CheckedBox RatingBar ProgressBar 下拉列表:ListView Spinner <!-- 单选按钮必须放在单选按钮组当中才能生效 ,并 ...

  7. PHP添加、更新solr索引

    <?php $options = array ( 'hostname' => 'localhost', 'port' => '8080', 'path'=>'solr/help ...

  8. 04_RHEL7.1忘记root密码

    在开机进入启动项时,选择需要重设密码的那个启动项 按e进入编辑模式,找到rhgb和quiet参数(几乎在最下面),替换为 init=/bin/sh 按ctrl+X不需密码进入shell 以rw的方式重 ...

  9. webAPP前端必备知识

    了解各浏览器内核 Firefox:-moz-box-shadow Safari:-webkit-box-shadow Opera:-o-box-shadow IE:-ms-box-shadow Web ...

  10. YesFInder - Web File Manager 网页文件管理系统

    开发原由: 原来想找一下实现可视化图片上传程序,先找了ckfinder,发现居然是收费的,而且用起来也不顺手,于是想能不能自己写一个.想到这就立即动手,花2天时间完成初步功能,然后再花了3天完善.目前 ...