使用js或jquery实现常用选项卡

2015-5-14 Jon js+jquery+ajax

使用js实现简单选项卡

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>使用js实现简单选项卡</title>
        <style>
        body {
            padding: 30px 200px;
            color: #323200;
            background: #669999;
            line-height: 30px;
        }
        p {
            padding: 6px;
            transition: 100ms;
            cursor: pointer;
        }
        .active {
            background: #ccc;
            color: #320000;
        }
        </style>
    </head>
    <body>
        <div>
            <p class="active">一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p>
            <p>一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p>
            <p>一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p>
            <p>一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p>
            <p>一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p>
            <p>一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p>
            <p>一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p>
            <p>一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p>
            <p>一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p>
            <p>一些过去，记住就好；一些回忆，收好安放，流年清浅，我只愿面朝大海春暖花开。</p>
        </div>
        <script>
        // 使用js实现
        (function() {
            var oDiv = document.getElementsByTagName('div')[0];
            var op = oDiv.getElementsByTagName('p');
            for (var i = 0; i < op.length; i++) {
                op[i].onmouseover = function() {
                    for (j = 0; j < op.length; j++) {
                        op[j].className = '';
                    }
                    this.className = 'active';
                }
            }
        })();
        </script>
    </body>
    </html>

您可以修改框中代码后运行查看

使用jquery实现简单选项卡

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用jquery实现简单选项卡</title>
        <style>
        body {
            padding: 30px 200px;
            color: #323200;
            background: #669999;
            line-height: 30px;
        }
        p {
            padding: 6px;
        }
        .active {
            background: #ccc;
            color: #320000;
        }
        </style>
    </head>
    <body>
        <div>
            <p class="active">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
            <p>滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
            <p>滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
            <p>滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
            <p>滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
            <p>滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
            <p>滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
            <p>滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
            <p>滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
            <p>滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
        </div>
        <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
        <script>
        // 使用jquery实现
        $(function() {
            var op = $('div p');
            op.mouseover(function() {
                for (var i = 0; i < op.length; i++) {
                    $(op[i]).removeClass('active');
                }
                $(this).addClass('active');
            });
        })();
        </script>
        <!-- 或者<div><p class="op active">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
       <p class="op">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
       <p class="op">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
       <p class="op">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
       <p class="op">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
       <p class="op">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
       <p class="op">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
       <p class="op">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
       <p class="op">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
       <p class="op">滚滚红尘，陌上寒烟。前世的缘，今生相见。</p>
       </div>script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script>// 使用jquery实现
       $(function(){
        var op = $('.op');
        op.mouseover(function(){
        for(var i=0;i<op.length;i++){
         $(op[i]).removeClass('active');
        }
        $(this).addClass('active');
        });
       })();
      -->
    </body>
    </html>

您可以修改框中代码后运行查看

使用js实现常用选项卡

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用js实现常用选项卡</title>
        <style>
        body {
            padding: 50px 200px;
            color: #323200;
            background: #669999;
            line-height: 30px;
        }
        button {
            padding: 5px 12px;
        }
        .active {
            background: yellow;
        }
        div {
            width: 400px;
            height: 200px;
            background: #ccc;
            padding: 10px;
            display: none;
        }
        .show {
            display: block;
        }
        </style>
        <script>
        window.onload = function() {
            var oBut = document.getElementsByTagName("button");
            var oDiv = document.getElementsByTagName("div");
            for (var i = 0; i < oBut.length; i++) {
                oBut[i].index = i;
                oBut[i].onclick = function() {
                    for (var i = 0; i < oBut.length; i++) {
                        oBut[i].className = "";
                        oDiv[i].className = "";
                    }
                    this.className = "active";
                    oDiv[this.index].className = "show";
                }
            }
        }
        </script>
    </head>
    <body>
        <button class="active">but1</button>
        <button>but2</button>
        <button>but3</button>
        <button>but4</button>
        <br/>
        <div class="show">生活，就是面对现实微笑，就是越过障碍注视未来；生活，就是用心灵之剪，在人生之路上裁出叶绿的枝头；生活，就是面对困惑或黑暗时，灵魂深处燃起豆大却明亮且微笑的灯展</div>
        <div>成熟的麦子低垂着头，那是在教我们谦逊；一群蚂蚁能抬走大骨头，那是在教我们团结；温柔的水滴穿岩石，那是在教我们坚韧；蜜蜂在花丛中忙碌，那是在教我们勤劳。</div>
        <div>思念是一首诗，让你在普通的日子里读出韵律来；思念是一阵雨，让你在枯燥的日子里湿润起来；思念是一片阳光，让你的阴郁的日子里明朗起来。</div>
        <div>品味生活，完善人性。存在就是机会，思考才能提高。人需要不断打碎自己，更应该重新组装自己。</div>
    </body>
    </html>

您可以修改框中代码后运行查看

使用js选项卡之万年历

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用js选项卡之万年历</title>
        <style>
        * {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
        }
        body {
            background: #f6f9fc;
            font-family: arial;
        }
        .calendar {
            width: 210px;
            margin: 50px auto 0;
            padding: 10px 10px 20px 20px;
            background: #eae9e9;
        }
        .calendar ul {
            width: 210px;
            overflow: hidden;
            padding-bottom: 10px;
        }
        .calendar li {
            float: left;
            width: 58px;
            height: 54px;
            margin: 10px 10px 0 0;
            border: 1px solid #fff;
            background: #424242;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }
        .calendar li h2 {
            font-size: 20px;
            padding-top: 5px;
        }
        .calendar li p {
            font-size: 14px;
        }
        .calendar .active {
            border: 1px solid #424242;
            background: #fff;
            color: #e84a7e;
        }
        .calendar .active p {
            font-weight: bold;
        }
        .calendar .text {
            width: 178px;
            padding: 0 10px 10px;
            border: 1px solid #fff;
            padding-top: 10px;
            background: #f1f1f1;
            color: #555;
        }
        .calendar .text h2 {
            font-size: 14px;
            margin-bottom: 10px;
        }
        .calendar .text p {
            font-size: 12px;
            line-height: 18px;
        }
        </style>
        <script>
        var aDatas = [" 长长的思念，幻化成我手中的小签，被吟成清瘦俊秀的诗行。", "既然人比人，气死人，那么，我还是努力做一个气死别人的人吧。", "爱了你这么多年，我的心一直在向着你，最后你却还是背叛了我", "我爱你是因为我信任你，现在你连最起码的信任都不能给我", "这是我唯一一次想要选择输，因为只有这样才能靠近你", "谁人背后不说人谁人背后无人说", "真正的爱情是一种精神上的享受，而不是用爱情换来对方的奢侈品", "老衲曾经回眸一笑，迷得师太神魂颠倒。", "要想真正的坚强，就要学会保护自己最真实的心。", "我始终无法忘你，你那像谎言一样美好的承诺", "判断一个人心里有问题，不仅仅是外表的坏，而是他心里的痛有多少", "身边的每个人都无法理解，我为什么要执着于过去，那是因为你曾在哪里"];
        window.onload = function() {
            var oTab = document.getElementById("tab");
            var ali = oTab.getElementsByTagName("li");
            var oDiv = oTab.getElementsByTagName("div")[0];
            for (var i = 0; i < ali.length; i++) {
                ali[i].index = i + 1;
                ali[i].onmouseover = function() {
                    for (var i = 0; i < ali.length; i++) {
                        ali[i].className = "";
                    }
                    this.className = "active";
                    oDiv.innerHTML = "<h2>" + this.index + "月活动</h2><p>" + aDatas[this.index - 1] + "</p>";
                }
            }
        }
        </script>
    </head>
    <body>
        <div id="tab" class="calendar">
            <ul>
                <li>
                    <h2>1</h2>
                    <p>JAN</p>
                </li>
                <li>
                    <h2>2</h2>
                    <p>FER</p>
                </li>
                <li>
                    <h2>3</h2>
                    <p>MAR</p>
                </li>
                <li>
                    <h2>4</h2>
                    <p>APR</p>
                </li>
                <li>
                    <h2>5</h2>
                    <p>MAY</p>
                </li>
                <li>
                    <h2>6</h2>
                    <p>JUN</p>
                </li>
                <li>
                    <h2>7</h2>
                    <p>JUL</p>
                </li>
                <li>
                    <h2>8</h2>
                    <p>AUG</p>
                </li>
                <li>
                    <h2>9</h2>
                    <p>SEP</p>
                </li>
                <li>
                    <h2>10</h2>
                    <p>OCT</p>
                </li>
                <li>
                    <h2>11</h2>
                    <p>NOV</p>
                </li>
                <li>
                    <h2>12</h2>
                    <p>DEC</p>
                </li>
            </ul>
            <div class="text">
                <h2>1月活动</h2>
                <p>长长的思念，幻化成我手中的小签，被吟成清瘦俊秀的诗行。</p>
            </div>
        </div>
    </body>
    </html>

您可以修改框中代码后运行查看

jquery选项卡最佳实践

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jquery选项卡最佳实践</title>
        <style>
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: " ";
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
        body {
            background: #eee
        }
        .switch {
            width: 1000px;
            margin: 50px auto;
        }
        .item {
            width: 150px;
            height: 80px;
            background: #555;
            text-align: center;
            line-height: 80px;
            color: #fff;
            font-size: 22px;
            float: left;
            margin-right: 15px;
        }
        .row {
            width: 960px;
            margin: 25px auto;
            min-height: 100px;
            background: #ccc;
            line-height: 35px;
            text-indent: 2em;
            display: none;
            padding: 20px;
            color: #333;
        }
        div.show {
            display: block;
        }
        </style>
    </head>
    <body>
        <div class="switch clearfix">
            <div class="item">第一个</div>
            <div class="item">第二个</div>
            <div class="item">第三个</div>
            <div class="item">第四个</div>
        </div>
        <div class="row show">生活是蜿蜒在山中的小径，坎坷不平，沟崖在侧。摔倒了，要哭就哭吧，怕什么，不心装模作样！这是直率，不是软弱，因为哭一场并不影响赶路，反而能增添一份小心。山花烂漫，景色宜人，如果陶醉了，想笑就笑吧，不心故作矜持！这是直率，不是骄傲，因为笑一次并不影响赶路，反而能增添一份信心。
            <br/>踏过一片海，用博识的学问激起片片微澜；采过一丛花，正在聪慧的碰碰外送来缕缕清喷鼻；无过一个梦，决定从那里启程。</div>
        <div class="row">生命的美丽，永远展现在她的进取之中；就像大树的美丽，是展现在它负势向上高耸入云的蓬勃生机中；像雄鹰的美丽，是展现在它搏风击雨如苍天之魂的翱翔中；像江河的美丽，是展现在它波涛汹涌一泻千里的奔流中。
            <br/>生活是一部大百科全书，包罗万象；生活是一把六弦琴，弹奏出多重美妙的旋律：生活是一座飞马牌大钟，上紧发条，便会使人获得浓缩的生命。</div>
        <div class="row">倘若希望在金色的秋天收获果实，那么在寒意侵人的早春，就该卷起裤腿，去不懈地拓荒、播种、耕耘，直到收获的那一天。
            <br/>耐力，是一种不显山石露水的执着；是一种不惧风不畏雨的坚忍；是一种不图名不图利的忠诚。</div>
        <div class="row">倘若我是跋涉千里的夜行者，母亲必是那重重夜幕里一盏温柔的灯光，远远的为我亮着，轻唤我迟疑的脚步；倘若我只是自怨自艾的蹩脚演员，母亲必是那热烈的掌声，呼唤我自信，鞭策我努力；倘若我是条嬉戏的小游鱼儿，母亲必是那一汪碧绿的湖水，在包容我顽皮任任性的同时，也将我的快乐涟漪般一圈圈的扩散了去。
            <br/>春暖花会开！如果你曾经历过冬天，那么你就会有春色！如果你有着信念，那么春天一定会遥远；如果你正在付出，那么总有一天你会拥有花开满圆。</div>
        <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
        <script>
        (function() {
            $('.item').mouseover(function() {
                var _this=$(this);
                $('.row').eq(_this.index()).addClass('show').siblings().removeClass('show');
            });
        })();
        </script>
    </body>
    </html>

您可以修改框中代码后运行查看

标签: js选项卡 jquery选项卡

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇Skype视频聊天工具和七牛云储存，非常好用的 cdn 静态文件
上一篇那些年，我们一起考驾照

发表评论：

知向前端

使用js或jquery实现常用选项卡

使用js实现简单选项卡

使用jquery实现简单选项卡

使用js实现常用选项卡

使用js选项卡之万年历

jquery选项卡最佳实践

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档