采纳追加赏 2022-07-18 17:06 采纳率: 30%
浏览 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 使用MATLAB进行余弦相似度计算加速
  • ¥15 服务器安装php5.6版本
  • ¥15 我想用51单片机和数码管做一个从0开始的计数表 我写了一串代码 但是放到单片机里面数码管只闪烁一下然后熄灭
  • ¥20 系统工程中，状态空间模型中状态方程的应用。请猛男来完整讲一下下面所有问题
  • ¥15 我想在WPF的Model Code中获取ViewModel Code中的一个参数
  • ¥15 arcgis处理土地利用道路 建筑 林地分类
  • ¥20 使用visual studio 工具用C++语音，调用openslsx库读取excel文件的sheet问题
  • ¥100 寻会做云闪付tn转h5支付链接的技术
  • ¥15 DockerSwarm跨节点无法访问问题
  • ¥15 使用dify通过OpenAI 的API keys添加OpenAI模型时报了“Connection Error”错误