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 相关文章推荐
jquery表格内容筛选实现思路及代码
Apr 16 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
JavaScript的Set数据结构详解
Feb 18 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为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
Python 串口读写的实现方法
2019/06/12 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
求职者简历中的自我评价
2013/10/20 职场文书
学生会主席事迹材料
2014/01/28 职场文书
幼儿园家长寄语
2014/04/02 职场文书
离职保密承诺书
2014/05/28 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
入股合作协议书
2014/10/12 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书