啦啦！今天又学了一招，js写几十行的tab标签页jquery写一行就行啦，用到了链式操作！以下是代码：

<!DOCTYPE html>

<html lang="en">

<head>

<style>

    *{

        padding: ;

        margin: ;

    }

    ul{

        list-style-type: none;

    }

    #ul{

        height: 30px;

        margin-bottom: 10px;

    }

    #ul li {

        height: 30px;

        line-height: 30px;

        padding:  15px;

        border: 1px solid gray;

        float: left;

        margin-right: 3px;

        cursor: pointer;

    }

    #ul li.current {

        background: #abcdef;

    }

    #content div{

        width: 300px;

        height: 200px;

        border: 1px solid red;

        border-collapse: collapse;

        display: none;

    }

    #content div.php{

        display: block;

    }

</style>

    <script src = 'js.js'></script>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <ul id="ul">

        <li class = 'current'>php</li>

        <li>ruby</li>

        <li>python</li>

    </ul>

    <div id="content">

        <div class = "php">php。。。。。。介绍</div>

        <div class = "ruby">ruby。。。。。。介绍</div>

        <div class = "python">python。。。。。。介绍</div>

    </div>

    <script>

        $('li').click(function(){

            //$(this).css('background','#abcdef');

            //$(this).siblings().css('background','white');

            $(this).addClass('current').siblings().removeClass('current').parent().next().children().eq($(this).index()).show().siblings().hide();   //添加class

            //var m = $(this).html();

            //$('.'+m).css('display','block').siblings().css('display','none');//class选择法

            //$('#content div').eq($(this).index()).addClass('php').siblings().removeClass('php');//索引选择法

            //$('#content div').eq($(this).index()).show().siblings().hide();

        })

    </script>

</body>

</html>

　　注释掉的部分还有一种方法来实现关联li和div的变化，“一行”的方法中用的是用li的索引的方法，我自己想出来的是用class选择器的方法，先将li中的文字选择出来，然后直接用来class选择，前提是你的div得有class名。

　　还有一种方法就是用内容选择器：

　　$('#content div contains(m)').......这种方法用于标签和html（）内容相关联更佳灵活，代码里没有写出来，大家可以自己试一下哦！

如何一行jquery代码写出tab标签页（链式操作）的更多相关文章

  1. jQuery对象的链式操作用法分析

    可以使用下面的原则判断一个函数返回的时候是jQuery对象,即是否可以用于链式操作. 除了获取某些数据的函数,比如获取属性值"attr(name)",获取集合大小"siz ...

  2. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

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

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

  4. CSS代码写出的各种形状图形

    做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片,今天就在这里教大家怎样用css代码写出各种规则不同的图形 1.正方形 #square {width ...

  5. 教你用CSS代码写出的各种形状图形

    做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片,今天就在这里教大家怎样用css代码写出各种规则不同的图形 1.正方形 #square {width ...

  6. [置顶] 如何用PYTHON代码写出音乐

    如何用PYTHON代码写出音乐 什么是MIDI 博主本人虽然五音不全,而且唱歌还很难听,但是还是非常喜欢听歌的.我一直在做这样的尝试,就是通过人工智能算法实现机器自动的作词和编曲(在这里预告下,通过深 ...

  7. 程序员面试京东前端，现场JavaScript代码写出魔方特效

    程序员面试京东前端,现场JS代码写出魔方特效,成功搞定20K月薪 今天小编我逛论坛,看到了一位程序员小伙子,因为是有了两年工作经验,然后去京东面试前端岗,一面二面轻松就过了,到了技术面这一块,小伙干脆 ...

  8. 用最简单的代码写出banner图轮播效果

    以下视频是由[赵一鸣随笔]博客提供的“用最简单的代码写出banner图轮播效果”. 查看全屏高清视频,请点击链接:http://www.zymseo.com/58.html

  9. JS函数 编程练习 使用javascript代码写出一个函数：实现传入两个整数后弹出较大的整数。

    编程练习 使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数. 任务 第一步: 编写代码完成一个函数的定义吧. 第二步: 我们来补充函数体中的控制语句,完成函数功能吧. 提示: ...

随机推荐

  1. position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

    这是寒冬大神提出的一个题目,刚开始看到这题的时候完全不知道从什么地方回答起好,题目内容比较广泛,找不到针对点.后来我觉得这个题目应该能拆成几个点来回答:1.'display'.'position' 和 ...

  2. GridView多行标题行、改造标题行、自定义标题行完美版

    网上找了个找,最终还是自己做的比较靠谱,道理很简单,直接看代码 代码:   /// <summary> /// =================== 两行标题行 ============ ...

  3. jquery validation 简单验证手机号码

    js代码 // 手机号码验证 jQuery.validator.addMethod("isMobile", function(value, element) { var lengt ...

  4. 委托、匿名函数、Lambda表达式和事件的学习

    委托: 还记得C++里的函数指针么?大家可以点击这里查看一下以前的笔记.C#的委托和C++中的函数指针效果一致. 当我们需要将函数作为对象进行传递和使用时就需要用到委托. 下面我们看一个例子: usi ...

  5. C++学习笔记（十一）：void*指针、类型转换和动态内存分配

    void*指针 void关键字表示“空类型”的概念.但是,这里的“空类型”不表示“任意类型”,而是表示不存在的意思,也就是说C/C++不允许你写语句void a,不存在类型为void的东西. void ...

  6. 如何创建一个有System用户权限的命令行

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何创建一个有System用户权限的命令行.

  7. Postfix上的反垃圾邮件的四个方法

    在介绍如何配置Postfix的smtp配置之前有必要首先介绍一下它的背景和特点.Postfix是一个由IBM资助下由WietseVenema 负责开发的自由软件工程的一个产物,其目的是为用户提供除se ...

  8. SQL Server内存性能分析

    内存概念: Working Set = Private Bytes + Shared Memory Working Set:某个进程的地址空间中,存放在物理内存的那一部分 Private Bytes: ...

  9. Codeforces Codeforces Round #319 (Div. 2) B. Modulo Sum 背包dp

    B. Modulo Sum Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/577/problem/ ...

  10. 为什么我刚发表的文章变成了“待审核”，csdn有没有官方解释啊

    为什么我刚发表的文章变成了"待审核",csdn有没有官方解释啊,什么样的文章才会变为待审核呢? 并且从草稿箱和回收站里也看不到我的文章了,希望我的文章没有删掉. 文章的字是一个个打 ...