JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">
  <input class="active" type="button" value="五言律诗">
  <input type="button" value="七言律诗">
  <input type="button" value="五言绝句">
  <input type="button" value="七言绝句">
  <div style="display: block;">
    <p class="title">落 花</p>
    <p class="author">李商隐</p>
    <p>高阁客竟去，小园花乱飞。</p>
    <p>参差连曲陌，迢递送斜晖。</p>
    <p>肠断未忍扫，眼穿仍欲归。</p>
    <p>芳心向春尽，所得是沾衣。</p>
  </div>
  <div>
    <p class="title">蜀 相</p>
    <p class="author">杜甫</p>
    <p>丞相祠堂何处寻，锦官城外柏森森。</p>
    <p>映阶碧草自春色，隔叶黄鹂空好音。</p>
    <p>三顾频烦天下计，两朝开济老臣心。</p>
    <p>出师未捷身先死，长使英雄泪满襟。</p>
  </div>
  <div>
    <p class="title">八阵图</p>
    <p class="author">杜甫</p>
    <p>功盖三分国，名成八阵图。</p>
    <p>江流石不转，遗恨失吞吴。</p>
  </div>
  <div>
    <p class="title">泊秦淮</p>
    <p class="author">杜牧</p>
    <p>烟笼寒水月笼沙，夜泊秦淮近酒家。</p>
    <p>商女不知亡国恨，隔江犹唱后庭花。</p>
  </div>
</div>
<div id="div2">
  <input class="active" type="button" value="五言律诗">
  <input type="button" value="七言律诗">
  <input type="button" value="五言绝句">
  <input type="button" value="七言绝句">
  <div style="display: block;">
    <p class="title">落 花</p>
    <p class="author">李商隐</p>
    <p>高阁客竟去，小园花乱飞。</p>
    <p>参差连曲陌，迢递送斜晖。</p>
    <p>肠断未忍扫，眼穿仍欲归。</p>
    <p>芳心向春尽，所得是沾衣。</p>
  </div>
  <div>
    <p class="title">蜀 相</p>
    <p class="author">杜甫</p>
    <p>丞相祠堂何处寻，锦官城外柏森森。</p>
    <p>映阶碧草自春色，隔叶黄鹂空好音。</p>
    <p>三顾频烦天下计，两朝开济老臣心。</p>
    <p>出师未捷身先死，长使英雄泪满襟。</p>
  </div>
  <div>
    <p class="title">八阵图</p>
    <p class="author">杜甫</p>
    <p>功盖三分国，名成八阵图。</p>
    <p>江流石不转，遗恨失吞吴。</p>
  </div>
  <div>
    <p class="title">泊秦淮</p>
    <p class="author">杜牧</p>
    <p>烟笼寒水月笼沙，夜泊秦淮近酒家。</p>
    <p>商女不知亡国恨，隔江犹唱后庭花。</p>
  </div>
</div>

CSS

#div1 div,
#div2 div {
  width: 400px;
  height: 300px;
  border: 1px solid #ccc;
  overflow: hidden;
  display: none;
  margin: 15px 0;
}

#div1 input,
#div2 input {
  color: #fff;
  width: 100px;
  height: 40px;
  background: darkseagreen;
  border: none;
  font-size: 14px;
  letter-spacing: 5px;
}

#div1 p,
#div2 p {
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  color: darkgreen;
}

#div1 .title,
#div2 .title {
  padding: 0;
  font-weight: bold;
}

#div1 .active,
#div2 .active {
  background: sandybrown;
  color: #fff;
}

JavaScript

function TabSwitch(id) {
  this.oDiv = document.getElementById(id);
  this.aInput = this.oDiv.getElementsByTagName('input');
  this.aDiv = this.oDiv.getElementsByTagName('div');
  this.iNow = 0; //自定义属性

}
TabSwitch.prototype.switch = function() { //原型
  for (var i = 0; i < this.aInput.length; i++) {
    var This = this; //将指向面向对象的this保存下来
    this.aInput[i].index = i;
    this.aInput[i].onmousemove = function() {
      This.tab(this); //This指向面向对象           this指向this.aInput[i]
    }
  }
}
TabSwitch.prototype.tab = function(obj) { //原型
  for (var i = 0; i < this.aInput.length; i++) {
    this.aInput[i].className = '';
    this.aDiv[i].style.display = 'none';
  }
  this.aInput[obj.index].className = 'active';
  this.aDiv[obj.index].style.display = 'block';
}

//自动播放
TabSwitch.prototype.autoPlay = function() {
  var This = this;
  setInterval(function() {
    if (This.iNow == This.aInput.length - 1) {
      This.iNow = 0;
    } else {
      This.iNow++;
    }
    for (var i = 0; i < This.aInput.length; i++) {
      This.aInput[i].className = '';
      This.aDiv[i].style.display = 'none';
    }
    This.aInput[This.iNow].className = 'active';
    This.aDiv[This.iNow].style.display = 'block';
  }, 1000);
}
var t1 = new TabSwitch('div1');
t1.switch();
var t2 = new TabSwitch('div2'); //面向对象的复用性
t2.switch();
t2.autoPlay();