javascript代码实例教程-jQuery简单几行代码实现tab切换_js

上一篇: javascript代码实例教程-jQuery判... 下一篇:javascript代码实例教程-jQuery实...

javascript代码实例教程-jQuery简单几行代码实现tab切换

发布时间：2019-01-01 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery简单几行代码实现tab切换，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

jQuery简单几行代码实现tab切换。今天突然心血来潮，想到一个很简单的方法即可达到的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>
<p id="outer">
    <ul id="tab">
        <li class="current">第一课</li>
        <li>第二课</li>
        <li>第三课</li>
    </ul>
    <p id="content">
        <ul style="display:block;">
           1111
        </ul>
        <ul>
            2222
        </ul>
        <ul>
           3333
        </ul>
    </p>
</p>
<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>