<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script src="./jquery.min.js"></script>
    <script>
        // jQuery的循环
        // 1 , 隐式迭代
        // 会自动给 伪数组中的所有标签对象,加载相同的内容 属性样式等设定 以及 事件的绑定
        console.log( $('ul>li'))
        // 设定的属性样式,会自动加载给所有的标签对象
        $('ul>li').css({color:'red'});
        // 给所有的标签的自动绑定相同的事件
        $('ul>li').click(()=>{
            console.log(123);
        })
        // 2 , each循环
        // 隐式迭代,获取属性,只能获取第一个标签的属性和属性值
        // 不会逐一获取所有标签对象的属性和属性值
        // 需要使用循环语法
        // 第二个参数,存储的标签对象,是 js 对象形式,需要 $() 转化为 jQuery 语法形式
        // $().each( (索引,标签对象)=>{} )
 
   <div class="box">
        <ul>
            <li name="ulli" class="active">1</li>
            <li name="ulli">2</li>
            <li name="ulli">3</li>
        </ul>
        <ol>
            <li name="olli" class="active">内容1</li>
            <li name="olli">内容2</li>
            <li name="olli">内容3</li>
        </ol>
    </div>
    <script src="./jquery.min.js"></script>
    <script>
        // 思路:
        //   点击 ul>li 清除 ul>li 和 ol>li 的css样式
        //   给 点击的 ul>li 添加样式
        //   找到索引相同的 ol>li 添加样式
        // jQuery思路:
        //  点标签,给当前标签添加样式,给兄弟标签去除样式
        //  找到父级ul,找到ul下的ol,找到ol中的li,清除所有li样式,找到索引相同的li,添加样式
        // 匿名的事件处理函数,this指向的是 触发事件的标签对象
        // 是 js 标签对象 需要 $(this) 转化为 jQuery标签对象
        $('ul>li').click(function(){   
             $(this).addClass('active')  // 给点击的ul>li添加样式
             .siblings()                 // 找到所有的兄弟标签
             .removeClass('active')      // 给兄弟标签删除样式
             .parent()                   // 当期是ul>li,找父级,是ul
             .next()                     // ul的下一个兄弟是ol
             .find('li')                 // 在ol中找到所有的li
             .removeClass('active')      // 给所有ol>li清除样式
             .eq($(this).index())        // 找到与this索引相同的ol>li
             .addClass('active')         // 添加样式  
            $(this).addClass('active').siblings().removeClass('active').parent().next().find('li').removeClass('active').eq( $(this).index() ).addClass('active');                     
        })

jquery的循环 tab切换的更多相关文章

  1. jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据

    今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...

  2. jquery写的tab切换效果 非常简单

    自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...

  3. 自己编写jQuery插件之Tab切换

    自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...

  4. jquery时间轴tab切换效果实现结合swiper实现滑动显示效果

    需求:根据时间轴进行tab页面内容切换(时间轴需要滑动查看并选择) 实现思路: 结合swiper插件实现滑动显示效果 根据transform: translateX进行左侧切换效果的实现(具体实现cs ...

  5. 封装jQuery插件实现TAB切换

    先上效果图: 直接上代码: index.html <!DOCTYPE html> <html lang="en"> <head> <met ...

  6. Jquery实现横向tab切换

    //需求:鼠标放在不同的导航栏上,下面显示的内容自动切换 //代码如下 <!DOCTYPE html> <html lang="en"> <head& ...

  7. jQuery 练习:tab 切换

    实现内容随菜单切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. jquery中简易tab切换

    <!doctype html> <html> <head> <title>test</title> <meta content=&qu ...

  9. 一款jquery写出来的tab切换

    当时做这个的时候,当前状态是不规则的,li对应的有3块内容,分别设定不同背景图片,只显示当前的一个背景,鼠标移上去的时候其余2个用background-position: -1000px 0px;来隐 ...

  10. jQuery的DOM操作实例(1)——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

随机推荐

  1. ping的常用方法

    ping的常用方法 ping +ip tcping +ip+端口号(例如 tcping 127.0.0.1 8080) telnet +ip+端口号 nc -nzv +ip+端口号(linux用)

  2. 五福背后的 Web 3D 引擎 Oasis Engine 正式开源

    简介: Oasis 从开源走向新的起点,用 3D 化的交互和表达让世界变得更美好. 相信大家已经体验了今年支付宝五福的活动,无论是今年的五福首页还是打年兽游戏都是由蚂蚁互动图形引擎(代号:Oasis ...

  3. 融合趋势下基于 Flink Kylin Hudi 湖仓一体的大数据生态体系

    简介: 本文由 T3 出行大数据平台负责人杨华和资深大数据平台开发工程师王祥虎介绍 Flink.Kylin 和 Hudi 湖仓一体的大数据生态体系以及在 T3 的相关应用场景. 本文由 T3 出行大数 ...

  4. 浅谈RSocket与响应式编程

    ​简介: RSocket是高效一个二进制的网络通讯协议,能够满足很多场景下使用.另外,RSocket也是一个激进的响应式捍卫者,激进到连API都跟响应式无缝集成.本文我们将和大家分享RSocket与响 ...

  5. 技术干货 | 闲鱼:一个优秀的 Push 平台,需要经历怎样的前世今生

    ​简介: mPaaS 消息推送服务,快速集成多家厂商 Push 通道,有效提高用户留存率,提升用户体验. 编者荐语: 点击这里,了解 mPaaS 消息推送服务,快速集成多家厂商 Push 通道,有效提 ...

  6. 关于多个 Cookie 的分隔符这件事

    对于 Cookie 的处理上,我最近遇到一个问题,那就是如何分割 Cookie 的内容.有人说是使用逗号分割,有人说是使用分号分割,究竟用哪个才是对的?其实这个答案是需要分为两个过程,分别是请求和响应 ...

  7. dotnet 读 WPF 源代码笔记 WPF 是如何做到一套代码兼容多个 .NET Framework 版本

    在 .NET Framework 时代里面,有一组有趣的概念,那就是 SDK 和 Runtime 这两个概念.开发模式十分有趣,在开发者设备上,可以指定 .NET Framework 的 SDK 版本 ...

  8. dotnet 在 UOS 国产系统上使用 MonoDevelop 进行拖控件开发 GTK 应用

    先从一个 Hello World 应用开始,试试和古老的 WinForms 一样的拖控件式开发 在创建完成一个 GTK# 2.0 应用之后,咱可以试试开始拖控件的开发,当然这个开发方式开发出来的应用界 ...

  9. 老外为了在MacBook上玩原神,让M1支持了所有iOS应用 | Github每周精彩分享第一期

    大家好,这里是每周更新的Github有趣项目分享,我是每周都在吃瓜的蛮三刀酱. 我会从Github热门榜里选出 高质量.有趣,牛B 的开源项目进行分享. 废话不多说,看看最近有什么有意思的Github ...

  10. 51k+ Star!动画图解、一键运行的数据结构与算法教程!

    大家好,我是 Java陈序员. 我们都知道,<数据结构与算法> -- 是程序员的必修课. 无论是使用什么编程语音,亦或者是前后端开发,都需要修好<数据结构与算法>这门课! 在各 ...