啦啦！今天又学了一招，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. HDU 1226 BFS

    注意密码位数<=500 输出注意十六进制改成字母 要点题目都已说明 ac就好 #include<iostream> #include<stdio.h> #include& ...

  2. win32进阶之路：给锁屏软件增加一个超链接按钮

    前言: windows下一切皆窗口,我们看到的超链接也是窗口,效果图如下: 鼠标放在赵大哥博客园主页和关于软件两个按钮上,按钮上的字体会从绿色变成红色,同时鼠标指针变为手型,点下鼠标左键就会调用默认浏 ...

  3. Android最新锁屏病毒分析及解锁

    一.情况简介   从去年开始PC端的敲诈者类病毒在不断的爆发,今年年初的时候手机上也开始出现了敲诈者之类的病毒,对这类病毒很无语也是趋势,因为很多时候病毒的产生是和金钱利益相关的.前天去吾爱破解论坛病 ...

  4. 字母A-Z写法

    #大写的a-z,ASCII编码 65..90|%{[char]$_}     #小写的A-Z  97..122|%{[char]$_}    方法二: ([char[]](97..122) -as [ ...

  5. shell重定向调试信息

    shell重定向调试信息 fulinux ******************************************************************************* ...

  6. Google stuff

    Google Pro Tip: Use Back-of-the-envelope-calculations to Choose the Best Design - High Scalability - ...

  7. UNIX标准化及实现之选项

    POSIX.1的2001版,包括了ISO C标准所指定的各个函数.其接口分成了两类:必需接口和可选接口.可选接口按功能又进一步分成50个区.表1中按它们各自的选项代码总结了没有被弃用的编程接口.选项代 ...

  8. Component migration documentation

    Component migration documentation The following is a list of migration documents for components we s ...

  9. mysql 按月按周统计

    http://hi.baidu.com/liangjian1024/blog/item/6861541b1416094842a9ad7c.html 表finance有俩个字段如下 date date  ...

  10. 键盘工具栏的快速集成--HcCustomKeyboard

    源项目地址:HcCustomKeyboard HcCustomKeyboard是一个键盘工具栏控件: 效果: HcCustomKeyboard使用很方便: 三部: 添加控件->操作处理-> ...