采纳追加赏 2022-07-18 17:06 采纳率: 35.3%
浏览 86
已结题

jq实现多个切换效果

点击tone li切换,top也同步切换。down box隐藏显示并增加类名on
因为可能会有多个列表，用一个jq方法实现效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> tab效果测试 </title>
    <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>

<style type="text/css">
.frame{display:table;width: 500px;margin: auto;padding:20px;margin-bottom:20px;background: #f2f2f2;}
.tone{ }
.tone li{display: inline-block;padding:10px;margin: 0 10px;cursor: pointer;background:#ddd;}
.tone li.active{background:#f60}
.top span{display: inline-block;padding: 10px 30px;margin-right: 10px;background: #ddd;}
.top span.on{background: #f60;}
.down{ }
.down .box{display:none; padding:10px;margin-top: 10px;background:#ddd;}
.down .box.on{background: #f60;}
</style>

<div class="frame">
    <div class="shell">
        <div class="top">
            <span class="on">aa</span>
            <span>bb</span>
        </div>
        <ul class="tone">
            <li class="active">11</li>
            <li>22</li>
        </ul>
    </div>
    <div class="down">
        <div class="box on" style="display: block;">11</div>
        <div class="box">22</div>
    </div>
</div>

<div class="frame">
    <div class="shell">
        <div class="top">
            <span class="on">aa</span>
            <span>bb</span>
        </div>
        <ul class="tone">
            <li class="active">11</li>
            <li>22</li>
        </ul>
    </div>
    <div class="down">
        <div class="box on" style="display: block;">11</div>
        <div class="box">22</div>
    </div>
</div>

<div class="frame"></div>
...

<script>
//tab
 
</script>  

</body>
</html>
  • 写回答

3条回答 默认 最新

  • 天际的海浪 2022-07-18 17:30
    关注

    你题目的解答代码如下：

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> tab效果测试 </title>
    <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>
 
<style type="text/css">
.frame{display:table;width: 500px;margin: auto;padding:20px;margin-bottom:20px;background: #f2f2f2;}
.tone{ }
.tone li{display: inline-block;padding:10px;margin: 0 10px;cursor: pointer;background:#ddd;}
.tone li.active{background:#f60}
.top span{display: inline-block;padding: 10px 30px;margin-right: 10px;background: #ddd;}
.top span.on{background: #f60;}
.down{ }
.down .box{display:none; padding:10px;margin-top: 10px;background:#ddd;}
.down .box.on{background: #f60;}
</style>
 
<div class="frame">
    <div class="top">
        <span class="on">aa</span>
        <span>bb</span>
    </div>
    <ul class="tone">
        <li class="active">11</li>
        <li>22</li>
    </ul>
    <div class="down">
        <div class="box on" style="display: block;">11</div>
        <div class="box">22</div>
    </div>
</div>
 
<div class="frame">
    <div class="top">
        <span class="on">aa</span>
        <span>bb</span>
    </div>
    <ul class="tone">
        <li class="active">11</li>
        <li>22</li>
    </ul>
    <div class="down">
        <div class="box on" style="display: block;">11</div>
        <div class="box">22</div>
    </div>
</div>
 
<div class="frame"></div>
...
 
<script>
$(function(){
    $(".tone li").click(function(event){
        $(this).addClass("active").siblings().removeClass("active");
        var index = $(this).index();
        $(this).closest(".frame").find(".top span").eq(index).addClass("on").siblings().removeClass("on");
        $(this).closest(".frame").find(".down .box").eq(index).show().addClass("on").siblings().hide().removeClass("on");
    });
});
 
</script>  
 
</body>
</html>

    如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 7月29日
  • 已采纳回答 7月21日
  • 修改了问题 7月18日
  • 创建了问题 7月18日

悬赏问题

  • ¥50 三种调度算法报错 有实例
  • ¥15 关于#python#的问题，请各位专家解答！
  • ¥200 询问：python实现大地主题正反算的程序设计，有偿
  • ¥15 smptlib使用465端口发送邮件失败
  • ¥200 总是报错，能帮助用python实现程序实现高斯正反算吗？有偿
  • ¥15 对于squad数据集的基于bert模型的微调
  • ¥15 为什么我运行这个网络会出现以下报错？CRNN神经网络
  • ¥20 steam下载游戏占用内存
  • ¥15 CST保存项目时失败
  • ¥20 java在应用程序里获取不到扬声器设备