极简JQ选项卡

来源：互联网发布：php和mysql分开吗编辑：程序博客网时间：2024/06/18 12:10
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <!-- CSS部分 -->    <style type="text/css">        *{            padding:0;            margin:0;            list-style:none;        }        .tab {            width:300px;            height:300px;            margin:0 auto;        }        .tab ol {            float:left;            width:300px;            height:50px;            background:blue;        }        .tab ol li {            float:left;            width:100px;            height:50px;            line-height:50px;            text-align:center;            background:green;        }        .tab ol li.active {            background:yellow;        }        .tab ul {            float:left;            width:300px;            height:250px;        }        .tab ul li {            float:left;            width:300px;            height:250px;            line-height:200px;            text-align:center;            display:none;/* - 每一页的内容区域要隐藏 - */            background:#ddd;        }        .tab ul li.cur {            display:block;/* - 显示带"cur"的第一项 - */        }    </style></head><body>    <!-- HTML部分 -->    <div id="tab" class="tab">        <ol>            <li class="active">热点</li>            <li>时政</li>            <li>财经</li>        </ol>        <ul>            <li class="cur">热点</li>            <li>时政</li>            <li>财经</li>        </ul>    </div>    <!-- JS部分 -->    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>    <script type="text/javascript">        $(function(){            $("#tab ol li").click(function(){                now = $(this).index();                tab();            });            function tab(){                $("#tab ol li").eq(now).addClass('active').siblings().removeClass('active');                $("#tab ul li").eq(now).addClass('cur').siblings().removeClass('cur')            }        });    </script></body></html>
阅读全文
0 0