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.运行效果

    转载文章链接已标明,如有侵权请告知。文章仅作为知识记忆所用,如有错误,敬请指正。
  • 相关阅读:
    Markdown学习笔记
    带下划线点域名解析失败
    前端工程师学习之路
    Java 调用 WebService 客户端代码 含通过代理调用
    MySQL 日期函数 时间函数 总结 (MySQL 5_X)
    Apache、Tomcat整合环境搭建
    201671010142 <java程序设计>初次学习心得与感悟
    201671010142 Java基本程序设计结构学习的感悟
    201671010142.第五章的学习总结
    201671010142 继承定义与使用 感悟与总结
  • 原文地址:https://www.cnblogs.com/YorkZhangYang/p/14831498.html
Copyright © 2011-2022 走看看