Widget:TabJS

<style> .TabContainer ul{ margin: 0.3em 0; background: #505050; } .TabContainer .tab_li { list-style: none; display: inline-block; /*cursor: pointer;*/ transition: all .2s; margin: 2px; color:white; padding: .35rem 1.5rem; }

.TabContainer .tab_li:hover{ color: black; background: white; font-weight:bold; }

.TabContainer .tab_li:hover img.img-inv{ filter: invert(1); }

.TabContainer .tab_li img:not(.noinvert){ filter: invert(1); } .TabContainer .tab_li.active img{ filter: none; } .TabContainer .tab_li img.img-inv{ filter: none; } .TabContainer .tab_li.active img.img-inv{ filter: invert(1); } .TabContainer .tab_li.active { color: black; background: white; font-weight:bold; } .tab_con { display: none; position:relative; overflow:hidden; } .tab_con.active { display: block; } </style> <script> RLQ.push(['jquery', () => { //侦听点击事件 $(function(){ if(!window.hasBindTab){ window.hasBindTab = $('.TabContainer').each(function(){ $(this).on("click", "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>