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>

你题目的解答代码如下：

<!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

提供本人用过的实现方法思路：
1.绑定li的点击事件；
2.获取li所在的div最高层ifram元素；
3.按照实际需求找每个iframe的down，应该就能区分开每个iframe了；

实现思路很重要，根据下面思路解决。
1.通过绑定li的点击事件，点击切换操作；
2.获取li所在的div最高层ifram元素；
3.按照实际需求找每个iframe的down，应该就能区分开每个iframe了；