jQuery简单几行代码实现tab切换

发布时间：2020-12-14 23:13:19 所属栏目：资源来源：网络整理

导读：今天突然心血来潮，想到一个很简单的方法即可达到的tab效果其实逻辑很简单，但看到网上基本上没这样写的不知道实际应用中是否会有问题呢，请大侠指教复制代码代码如下: !doctype html html lang="en" head meta charset="UTF-8" titlejQuery简易选项卡/t

今天突然心血来潮，想到一个很简单的方法即可达到的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>

图片演示：

以上就是本文所述的全部内容了，希望大家能够喜欢。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!