ميدياويكي:Script/Tabber.js

ملاحظة: بعد الحفظ، أنت قد تحتاج إلى إفراغ الكاش الخاص بمتصفحك لرؤية التغييرات.

• فايرفوكس / سافاري: أمسك Shift أثناء ضغط Reload، أو اضغط على إما Ctrl-F5 أو Ctrl-R (⌘-R على ماك)
• جوجل كروم: اضغط Ctrl-Shift-R (⌘-Shift-R على ماك)
• إنترنت إكسبلورر: أمسك Ctrl أثناء ضغط Refresh، أو اضغط Ctrl-F5
• أوبرا: اذهب إلى Menu → Settings (Opera → Preferences على ماك) ثم إلى Privacy & security → Clear browsing data → Cached images and files.

function onTabClick(){

  var parent = this.parentElement;
  var buttonList = parent.children;
  var contentList = parent.nextElementSibling.children;
  var position = this.dataset.position;
  var activeButton = parent.querySelector(".tabber-active");

  if (activeButton == null) {
    this.classList.add("tabber-active");
    contentList[position].classList.add("tabber-active");
  } else {
    var activePosition = activeButton.dataset.position;
    if (activePosition == position) {
      if (event.currentTarget==this) {
        this.classList.remove("tabber-active");
        contentList[position].classList.remove("tabber-active");
      }
    } else {
      this.classList.add("tabber-active");
      contentList[position].classList.add("tabber-active");
      activeButton.classList.remove("tabber-active");
      contentList[activePosition].classList.remove("tabber-active");
    }
  }
}

function buttonTabber(context){
  
  var buttonList = context.querySelectorAll(".button");
  var targetButton = context.querySelector(".button:target");
    
  buttonList.forEach(function(button) {
    button.addEventListener("click", onTabClick, false);
  });
  if (targetButton !== null) {
    onTabClick.call(targetButton);
  }
}

(function(){
  var tabberContainers = document.querySelectorAll("div#mw-content-text div.tabber-container");
  tabberContainers.forEach(function(tabberContainer){
    buttonTabber(tabberContainer);
  });
})();