啦啦！今天又学了一招，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. DataTable 基本转换简单实例

    var query = from dt in tblProduct.AsEnumerable() where dt.Field<string>("StockNo") = ...

  2. 【STL源码学习】细品vector

    第一节:vector简介 vector是一种典型的类模板,使用的时候必须进行实例化. vector的数据存储在数组上,支持随机访问迭代器,支持下标操作[]和at操作,支持手动扩容和自动容量增长. ve ...

  3. squid3.0 隐藏 hearder 设置

    原文地址: http://www.wenzizone.cn/?p=311 squid2.6可以使用header_access来控制显示与隐藏http的header信息,但是在squid3.0版本中这个 ...

  4. 教你50招提升ASP.NET性能（十二）：在生产环境，仔细考虑你需要记录哪些日志

    (18)When in production, carefully consider what you need to log 招数18: 在生产环境,仔细考虑你需要记录哪些日志 Many peopl ...

  5. 【44】将与参数无关的代码抽离templates

    1.template是产生代码的代码,这就意味着源码看起来很少,生成的目标码大量膨胀. 2.考虑,如果两个方法有重复代码,我们会新建一个方法,把重复的代码放进去,原先两个方法调用第三个方法.如果两个类 ...

  6. 【10】令operator=返回一个reference to *this

    1.令operator= 返回一个reference to *this,为什么? 这只是一个协议,并无强制性.但是,为了与基本类型的行为保持一致性,强烈建议这么做.设计class 有一个宝典:一旦有疑 ...

  7. AdventureWorks Databases 2008 下载地址

    AdventureWorks Databases 2008 下载地址: RECOMMENDED DOWNLOAD  AdventureWorks2012_Database.zip example, 3 ...

  8. ThinkPHP CURD方法盘点：page方法

    page方法也是模型的连贯操作方法之一,是完全为分页查询而诞生的一个人性化操作方法. 用法 我们在前面已经了解了关于limit方法用于分页查询的情况,而page方法则是更人性化的进行分页查询的方法,例 ...

  9. nginx学习七 高级数据结构之动态数组ngx_array_t

    1 ngx_array_t结构 ngx_array_t是nginx内部使用的数组结构.nginx的数组结构在存储上与大家认知的C语言内置的数组有相似性.比方实际上存储数据的区域也是一大块连续的内存. ...

  10. sphinx全文检索之PHP使用(转)

    基础 数据结构: CREATE TABLE email ( emailid mediumint(8) unsigned NOT NULL auto_increment COMMENT '邮件id', ...