采纳追加赏 2022-07-18 17:06 采纳率: 34.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日

悬赏问题

  • ¥15 爬取豆瓣电影相关处理
  • ¥15 手机淘宝抓清除消息接口
  • ¥15 C#无selenium
  • ¥15 LD衰减计算的结果过大
  • ¥15 用机器学习方法帮助保险公司预测哪些是欺诈行为
  • ¥15 计算300m以内的LD衰减
  • ¥15 数据爬取,python
  • ¥15 怎么看 cst中一个面的功率分布图,请说明详细步骤。类似下图
  • ¥15 为什么我的pycharm无法用pyqt6的QtWebEngine
  • ¥15 FOR循环语句显示查询超过300S错误怎么办