<div class="_tabWrap">
    <div class="tab-tab">
        <a href="#">제목1</a>
        <a href="#">제목2</a>
    </div>
    <div class="tab-article">
        <article>내용1</article>
        <article>내용2</article>
    </div>
</div>

tab('._tabWrap');

/* tab */
function tab(s,o={}){const t={tab:".tab-tab",article:".tab-article",className:"active",mode:"normal",tabAfter:"",loadAfter:""},e={...t,...o};document.querySelectorAll(s).forEach(n=>{const t=n.querySelectorAll(`${e.tab} > *`),o=n.querySelectorAll(`${e.article} > *`);t.forEach((n,a)=>{n.setAttribute("tab",a),0===a&&n.classList.add(e.className)}),o.forEach((n,a)=>{n.setAttribute("tab",a),n.style.transition="opacity .3s",n.style.opacity=a===0?"1":"0",n.style.display=a===0?"block":"none"}),t.forEach(n=>{n.addEventListener("click",function(n){n.preventDefault();const a=this.getAttribute("tab");t.forEach(t=>t.classList.remove(e.className)),this.classList.add(e.className),o.forEach(t=>{if(t.getAttribute("tab")===a){t.style.display="block",t.style.opacity="0",requestAnimationFrame(()=>t.style.opacity="1")}else{t.style.opacity="0",t.style.display="none"}}),"function"==typeof e.tabAfter&&e.tabAfter()})}),"function"==typeof e.loadAfter&&e.loadAfter()})}