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 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
JS实现在线ps功能详解
Jul 31 Javascript
vue的路由映射问题及解决方案
Oct 14 Javascript
vue-property-decorator用法详解
Dec 12 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 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
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
最基础的Python的socket编程入门教程
2015/04/23 Python
python requests 使用快速入门
2017/08/31 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
经销商会议欢迎词
2014/01/11 职场文书
赡养老人协议书
2014/04/21 职场文书
交心谈心活动总结
2015/05/11 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android