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

 

posted @ 2021-05-31 15:01  YorkShare  阅读(54)  评论(0)  编辑  收藏  举报