zoukankan      html  css  js  c++  java
  • css3和Jquery实现选项卡效果

    内容转自博客https://www.cnblogs.com/scc-/p/9507645.html

    1.源码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
            *{margin:0px;padding:0px;}
            .tabbox{margin:10px;}
            .tabbox ul{list-style:none;display:table;}
            .tabbox ul li{float:left;width:100px;line-height:30px;padding-left:8px;border:1px solid #aaccff;margin-right:-1px;cursor:pointer;}
            .tabbox ul li.active{background-color:#e73839;color:white;font-weight:bold;}
            .tabbox .content{border:1px solid #aaccff;padding:10px;}
            .tabbox .content>div{display:none;}
            .tabbox .content>div.active{display:block;}
            </style>
        </head>
        <body>
            <ol>
            <li>使用jquery实现选项卡切换效果</li>
            <li>要求:2组选项卡相互不影响</li>
            </ol>
            
            <div class="tabbox">
              <ul>
                <li>选项卡一</li>
                <li class="active">选项卡二</li>
                <li>选项卡三</li>
                <li>选项卡四</li>
              </ul>
            <div class="content">
              <div>
                <div>asdfasdfasdfasdfasdfasdfa</div>
              </div>
            <div class="active">
              <div>asdfasdfasdfasdfasdf</div>
            </div>
              <div>33333333333</div>
                <div>44444444</div>
              </div>
            </div>
            
            <div class="tabbox">
              <ul>
                <li>选项卡一</li>
                <li class="active">选项卡二</li>
                <li>选项卡三</li>
                <li>选项卡四</li>
              </ul>
            <div class="content">
              <div>
                <div>555555555</div>
              </div>
            <div class="active">
              <div>66666666666</div>
            </div>
              <div>7777777777777</div>
              <div>8888888888888</div>
              </div>
            </div>
            
             <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
            <script type="text/javascript">
            $(function ()
            {
              $(".tabbox li").mouseover(function ()
              {
                //获取点击的元素给其添加样式,讲其兄弟元素的样式移除
                $(this).addClass("active").siblings().removeClass("active");
                //获取选中元素的下标
                var index = $(this).index();
                   console.log(index);
                $(this).parent().siblings().children().eq(index).addClass("active")
                .siblings().removeClass("active");
              });
            });
            
            </script>
        </body>
    </html>
    View Code

    2.运行效果

    转载文章链接已标明,如有侵权请告知。文章仅作为知识记忆所用,如有错误,敬请指正。
  • 相关阅读:
    常用DOS命令
    uCGUI窗口重绘代码分析
    STM32的FSMC总线驱动ili9341,掉电重启无法正常显示的问题
    再次编译 arm toolchains
    GDB和GDB Server
    QT Creator 环境使用 remote debug 调试 arm 程序
    [转]一个简洁的 systemd 操作指南
    用 bottle.py 写了个简单的升级包上传
    批量 ping 测试脚本(IP 扫描)
    float 对整形的取余运算
  • 原文地址:https://www.cnblogs.com/YorkZhangYang/p/14831498.html
Copyright © 2011-2022 走看看