Widget:TabJS3

<style> .mw-parser-output li {

  margin-bottom: 0;

}

.TabContainer ul{ margin: 0.3em 0; border-bottom: 3px solid rgba(192,0,0,1); } .TabContainer .tab_li { list-style: none; display: inline-block; /*cursor: pointer;*/ transition: all .2s; color:#8f8f8f; padding: .35rem 1.5rem;

  font-size: px;  
  font-weight: bold; 
  border-bottom: 3px solid #00000000;
  margin-bottom: -2px;

}

.TabContainer .tab_li:hover{ color: #555555; font-weight:bold;

  border-bottom: 3px solid #00000000;

}

.TabContainer .tab_li.active { color: black; font-weight:bold;

  border-bottom: 3px solid rgba(192,0,0,1);

} .tab_con { display: none; position:relative; overflow:hidden; } .tab_con.active { display: block; } </style> <script> (window.RLQ = window.RLQ || []).push(['jquery', () => { $(function(){ if(!window.hasBindTab){ window.hasBindTab = $('body').on("click", ".TabContainer ul .tab_li", function () { var index = $(this).index(); var $con = $(this).parent().siblings(".tab_con"); $(this).addClass('active').siblings().removeClass('active'); $con.removeClass('active').eq(index).addClass('active'); }) } }) }]); </script>