啦啦！今天又学了一招，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. H5页面请求跨域问题

    1.  <meta http-equiv="Access-Control-Allow-Origin" content="*"> 说明一下什么情况下我 ...

  2. ios 说一说UINavigationController 的堆栈

    iOS的界面堆栈管理比android的要好用很多. 这里写两点:一点是 如何重回前面的vc,而不是push一个alloc的新界面.第二点就是判断当前堆栈显示的vc是何vc. vc堆栈: vc1-> ...

  3. iOS 改变tableview cell的背景色

    cell.selectedBackgroundView = [[UIView alloc] initWithFrame:cell.frame]; cell.selectedBackgroundView ...

  4. iOS使用宏写单例

    本文只介绍ARC情况下的单例 过去一直背不下来单例如何写,就是知道这么回事,也知道通过宏来写单例,但是一直记不住,今天就来记录一下 - (void)viewDidLoad {     [super v ...

  5. PAT 1007

    1007. Maximum Subsequence Sum (25) Given a sequence of K integers { N1, N2, ..., NK }. A continuous ...

  6. 批量除去php页面的bom，页面meta跑到body中就是这个问题

    <?php if (isset($_GET['dir'])){ //设置文件目录 $basedir=$_GET['dir']; }else{ $basedir = '.'; } $auto = ...

  7. Nginx重定向[Rewrite]配置 for wordpress & Discuz

    首先Apache的Rewite规则差别不是很大,但是Nginx的Rewrite规则比Apache的简单灵活多了Nginx可以用if进行条件匹配,语法规则类似Cif ($http_user_agent ...

  8. Java 之 调用.Net的 WebService 整理

    最近做一个 java 调用 .net 服务的项目,其中 .net做了一个WebService,需要java来调用. 最开始.net的Service代码如下: using System; using S ...

  9. 转--object-C 与lua使用wax交互

    [51CTO独家译文]2011年6月的编程语言排行榜Lua语言一军突起,一举进入前十名.这与一年前苹果决定在iOS系统上使用Lua语言密不可分.但是,你了解如何用Lua语言在iOS上开发应用吗?51C ...

  10. Android_Handler

    xml文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...