啦啦！今天又学了一招，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. ASP .Net提交时禁用Button

    转自:http://gaterking.blog.51cto.com/69893/301691/ 今天遇到一种小情况,想要在.net的服务器控件asp:button按下去时通过OnClientClic ...

  2. JS幻灯片,循环播放,滚动导航,jQuery平滑旋转幻灯片

    最近在帮别人改一些东西,在网上找了好久,但是没有相同的,自己改了下,拿出来分享下: 先展示下效果把: index.html 页面展示代码 <!DOCTYPE html PUBLIC " ...

  3. iOS FONT字体名

    下面这段代码可以查看ios中可用的字体,具体那些字体长什么样,可以查看字体册工具. NSArray *familyArray = [UIFont familyNames]; for (id famil ...

  4. Windows下记事本编辑的Shell脚本放到Linux下执行出错,格式问题(/bin/bash^M: bad interpreter: 没有那个文件或目录)

    错误: /bin/bash^M: bad interpreter: 没有那个文件或目录 解决方案: 运行脚本时出现了这样一个错误,打开之后并没有找到所谓的^M,查了之后才知道原来是文件格式的问题,也就 ...

  5. 飘逸的python - 理解打开文件的模式

    当我们用open()函数去打开文件的时候,有好几种打开的模式.   'r'->只读 'w'->只写,文件已存在则清空,不存在则创建. 'a'->追加,写到文件末尾 'b'->二 ...

  6. memset函数具体说明

    1.void *memset(void *s,int c,size_t n)总的作用:将已开辟内存空间 s 的首 n 个字节的值设为值 c. 2.样例#include void main(){char ...

  7. C++ Primer 学习笔记_95_用于大型程序的工具 --多重继承与虚继承

    用于大型程序的工具 --多重继承与虚继承 引言: 大多数应用程序使用单个基类的公用继承,可是,在某些情况下,单继承是不够用的,由于可能无法为问题域建模,或者会对模型带来不必要的复杂性. 在这些情况下, ...

  8. innobackupex --slave-info参数的含义和适用场景

    http://blog.itpub.net/28916011/viewspace-1969135/       我有个问题一直没弄明白,就是innobackupex里面的--slave-info这个参 ...

  9. 【shell】while read line 与for循环的区别

    http://m.blog.itpub.net/22664653/viewspace-1175858/

  10. [原创]VS2013 EF6连接MySql需要几步？

    精简的美丽...... 1.安装mysql server下载地址 http://cdn.mysql.com/Downloads/MySQL-5.6/mysql-5.6.21-winx64.zip注意: ...