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 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
JavaScript中window和document用法详解
Jul 28 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下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
python使用生成器实现可迭代对象
2018/03/20 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
python 三元运算符使用解析
2019/09/16 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
小学班主任评语大全
2014/04/23 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
django 认证类配置实现
2021/11/11 Python
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
如何Tomcat中使用ipv6地址
2022/05/06 Servers