html选项卡封装案例及调用

26天前    标签:html    阅读:143    评论:0


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

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>


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

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

文章评论(0)

登录

博主信息

头像

生活很平淡,也很烦躁,如果您每天都能学到新东西,您就可以每天教别人新东西,今天的辛苦,是为了明天的更好。

职业:Web攻城狮

Email:2938039696@qq.com

学习交流群:简忆blogs技术群

项目合作:2938039696

置顶推荐

站点信息

874运行天数

252文章数量

主题框架:Foundation5
网站地图:XML网站地图
微信公众号:扫码关注公众号
公众号

打赏本站

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