html选项卡封装案例及调用

2019-08-27   阅读:2341   分类:前端    标签: html

选项卡在网页中经常会用到,以下是一个简单的案例封装。

1、代码封装

function tabSwtich(m,c,a){
    var change=function(i){
            m.each(function(index){
                index==i?$(this).addClass(a):$(this).removeClass(a);
            })  
            c.each(function(index){
                index==i?$(this).show():$(this).hide();
            });
        };
    m.each(function(i){
        $(this).mouseenter(function(){
            change(i);
        });
    })
}

2、调用方法:

$(function(){
  tabSwtich($('.tab_btn span'),$('.tab_content li'),'ac');
})


3、html代码:

<div class="tab">
    <div class="tab_btn">
        <span class="ac">选项1</span>
        <span>选项2</span>
        <span>选项3</span>
    </div>
    <div class="tab_content">
        <li style="display:block">内容1</li>
        <li style="display:none">内容2</li>
        <li style="display:none">内容3</li>
    </div>
</div>
<style>
    .tab_btn.ac{background:red}
</style>


【腾讯云】 爆款2核2G3M云服务器首年 61元,2核2G4M云服务器新老同享 99元/年,续费同价

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/198.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×