JSFiddle - React, Tailwind, and code Playground

by PiPiLu

HTML

<div class="wrap">
        <ul class="title">
            <li class="tab-items"><a>选项1</a></li>   
            <li class="tab-items"><a>选项2</a></li>
            <li class="tab-items"><a>选项3</a></li>
            <li class="tab-items"><a>选项4</a></li>
        </ul>
        <ul class="content">
            <li class="tab-content">内容1</li>
            <li class="tab-content">内容2</li>
            <li class="tab-content">内容3</li>
            <li class="tab-content">内容4</li>
        </ul>
    </div>
    <script>
(function($) {
    var Tab = function(options) {
        // 默认配置
        this.default = {
            el:".wrap",
        };
        // 合并对象
        this.parameter = $.extend({},this.default,options||{});
        this.init();  
    };
    Tab.prototype.init = function() {
       var self = this;
       var parameter = self.parameter;
       var el  = parameter.el;
       var type = parameter.type;
       var tab_items = $(el).find('.title li');
       tab_items.click(function() {

           var index = $(this).index();
           $('.content li').removeClass('tab-content-active');
           $('.content li').eq(index).addClass('tab-content-active');
       })
    }
    window.Tab = Tab;
}) (jQuery)
  var a  = new Tab({
          width:"5",
          height:"500",
      })
    </script>

CSS

*{
    margin:0;
    padding:0;
    list-style: none;
    color:#000;
    font-size: 14px;
}

.wrap{
    width:500px;
    height:auto;
    overflow:hidden;
}

.wrap .title{
    width:100%;
    height:40px;
    background: #e3e3e3;
    overflow: hidden
}

.wrap .title .tab-items{
    width:25%;
    height: 40px;
    float: left
}
.wrap .title .tab-items a{
    display: block;
    background:pink;
    height: 40px;
    width:80%;
    margin:0 auto;
    line-height: 40px;
    text-align: center;
    cursor: pointer
}
.wrap .content{
    width:100%;
    height: 250px;
    overflow: hidden;
    background: #efefef;
}

.wrap .content .tab-content{
    width:100%;
    height: 250px;
    float:left;
    display: none;
    
}
.wrap .content .tab-content-active{
    display: block;
}