jQuery简单几行代码实现tab切换


Posted in Javascript onMarch 10, 2015

今天突然心血来潮,想到一个很简单的方法即可达到的tab效果

其实逻辑很简单,但看到网上基本上没这样写的

不知道实际应用中是否会有问题呢,请大侠指教

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery简易选项卡</title>

<style>

    *{ margin:0; padding:0;}

body, ul, li {

    margin:0;

    padding:0;

}

body {

    font:12px/1.5 Tahoma;

}

#outer {

    width:450px;

    margin:10px auto;

}

#tab {

    overflow:hidden;

    zoom:1;

    background:#000;

    border:1px solid #000;

}

#tab li {

    float:left;

    color:#fff;

    height:30px;

    cursor:pointer;

    line-height:30px;

    list-style-type:none;

    padding:0 20px;

}

#tab li.current {

    color:#000;

    background:#ccc;

}

#content {

    border:1px solid #000;

    border-top-width:0;

}

#content ul {

    line-height:25px;

    display:none;

    margin:0 30px;

    padding:10px 0;

}

</style>

</head>

<body>

<div id="outer">

    <ul id="tab">

        <li class="current">第一课</li>

        <li>第二课</li>

        <li>第三课</li>

    </ul>

    <div id="content">

        <ul style="display:block;">

           1111

        </ul>

        <ul>

            2222

        </ul>

        <ul>

           3333

        </ul>

    </div>

</div>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script>

    $(function(){

        window.onload = function()

        {

            var $li = $('#tab li');

            var $ul = $('#content ul');

            $li.click(function(){

                $li.removeClass();

                var $t = $(this).index();

                $(this).addClass('current');

                $ul.css('display','none');

                $ul.eq($t).css('display','block');

            })

        }

    });

</script> 

</body>

</html>

图片演示:

jQuery简单几行代码实现tab切换

以上就是本文所述的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
微信小程序删除处理详解
Aug 16 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
jQuery实现高亮显示的方法
Mar 10 #Javascript
jQuery实现切换字体大小的方法
Mar 10 #Javascript
jQuery实现3D文字特效的方法
Mar 10 #Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 #Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 #Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 #Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 #Javascript
You might like
PHP5+UTF8多文件上传类
2008/10/17 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
php 各种应用乱码问题的解决方法
2010/05/09 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
python自动化测试实例解析
2014/09/28 Python
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
python 实现UTC时间加减的方法
2018/12/31 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
python Django 创建应用过程图示详解
2019/07/29 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
Pandas之缺失数据的实现
2021/01/06 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
高中生第一学年自我鉴定2015
2014/09/28 职场文书
先进个人总结范文
2015/02/15 职场文书
出纳试用期自我评价
2015/03/10 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
我去timi了,一起去timi是什么意思?
2022/04/13 杂记