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插入节点appendChild insertBefore使用方法
Jul 04 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
简单的jQuery入门指引
Jul 28 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
PHP检测用户语言的方法
2015/06/15 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
centos系统升级python 2.7.3
2014/07/03 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
树莓派实现移动拍照
2019/06/22 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
Python识别html主要文本框过程解析
2020/02/18 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
python爬取代理ip的示例
2020/12/18 Python
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
社区维稳工作方案
2014/06/06 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
党员年度个人总结
2015/02/14 职场文书
品质保证书格式
2015/02/28 职场文书
婚宴新郎致辞
2015/07/28 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
MySQL的join buffer原理
2021/04/29 MySQL
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang