一个TAP标签样式小插件的开发（jquery）

最新推荐文章于 2023-09-08 18:14:14 发布

喜东东啊

最新推荐文章于 2023-09-08 18:14:14 发布

阅读量912

点赞数 2

本文链接：https://blog.csdn.net/weixin_41016545/article/details/78617125

版权

首先书写页面布局，引入相关的js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插件练习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            margin: 50px;
        }
        .tabNav001{
            list-style: none;
        }
        .tabNav001 li{
            float: left;
            width: 150px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            margin-right: 3px;
            border: 1px solid #abcdef;
            border-bottom: none;
            cursor:pointer;
        }
        .tabNav001 li.current001{
            background: #abcdef;
            color: #ffffff;
            font-weight: 700;
        }
        .tabContent{
            clear: both;
        }
        .tabContent div{
            border: 1px solid #abcdef;
            display: none;
            width: 500px;
            height:200px;

        }

    </style>
</head>
<body>
    <div class="tab">
        <ul class="tabNav001">
            <li class="current001">HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
        <div class="tabContent">
            <div style="display: block;">html</div>
            <div>css</div>
            <div>javascript</div>
        </div>
    </div>

</body>
</html>
<script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="demo.js" ></script>
<script>
    $(function(){
        $('.tab').tab({
            eventType:'mouseover',
            tabNav:'.tabNav001>li',
            currentClass:'current001'
            }
    );
    })
</script>

下面是demo的代码

;(function($){
        $.fn.tab=function(options){
            var defaults={
                //各种参数 各种属性
                currentClass:'current',

                //代码简化
                tabNav:'.tabNav>li',
                tabContent:'.tabContent>div',
                eventType:'click'
            }
            var options=$.extend(defaults,options);
            this.each(function(){
                var _this=$(this);
                _this.find(options.tabNav).bind(options.eventType,function(){
                    $(this).addClass(options.currentClass).siblings().removeClass(options.currentClass)
                    var index=$(this).index();
                    _this.find(options.tabContent).eq(index).show().siblings().hide();
                })
            })

            return this;
            //返回的目的是为了能够在别的地方可以接着进行链式操作
        }
    })(jQuery);

代码引入直接就可以使用了

喜东东啊

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个TAP标签样式小插件的开发（jquery）

首先书写页面布局，引入相关的js文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>插件练习</title> <style type="text/css"> *{ margin: 0; padding: 0;
复制链接

扫一扫