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 相关文章推荐
javascript开发中因空格引发的错误
Nov 08 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
js实现json数组分组合并操作示例
Feb 12 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
PHP 实现的将图片转换为TXT
2015/10/21 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
matplotlib实现区域颜色填充
2019/03/18 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
Python是什么 Python的用处
2020/05/26 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
Python LMDB库的使用示例
2021/02/14 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
文员自我评价怎么写
2013/09/19 职场文书
初三化学教学反思
2014/01/23 职场文书
运动会入场词60字
2014/02/15 职场文书
中学校庆方案
2014/03/17 职场文书
2014年党课学习材料
2014/05/11 职场文书
观看信仰心得体会
2014/09/04 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
初婚未育证明样本
2014/10/24 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
关于 Python json中load和loads区别
2021/11/07 Python
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技