Javascript DOM Tab page

Description

Javascript DOM Tab page

View in separate window 

<!DOCTYPE html>
<head>
<title>Tabbed Pages</title>
<style>
  .tabcontainer//from ww w . j av  a  2 s.  c  o m
  {
    padding: 5px; width: 500px;
    margin: 20px;
  }
  .tabnavigation ul
  {
    padding: 0; margin: 0; display: none;
  }
  .tabnavigation ul li 
  {
    padding: 3px; display: inline; 
    border: 1px solid #000; background-color: #fff; 
  }
  .tabnavigation ul li:hover
  {
    cursor: pointer;
  }
  .tabpages
  {
    position: relative; z-index: 2;
    border: 1px solid #000; background-color: #fff;
  }
  .tabpage
  {
    margin: 0 10px; 
  }
</style>
<script>

// set up display
// for each container display navigation
// hide all but first page, highlight first tab
window.onload=function() {

  // for each container
  let containers = document.querySelectorAll(".tabcontainer");
  for (let j = 0; j < containers.length; j++) {
    
    
    // display and hide elements
    let nav = containers[j].querySelector(".tabnavigation ul");
    nav.style.display="block";

    // set current tab
    let navitem = containers[j].querySelector(".tabnavigation ul li");
    let ident = navitem.id.split("_")[1];
    navitem.parentNode.setAttribute("data-current",ident);
    navitem.setAttribute("style","background-color: #f00");

    let pages = containers[j].querySelectorAll(".tabpage");
    for (let i = 1; i < pages.length; i++) {
      pages[i].style.display="none";
    }

    let tabs = containers[j].querySelectorAll(".tabnavigation ul li");
    for (let i = 0; i < tabs.length; i++) {
      tabs[i].onclick=displayPage;
    }
  }
}

// click on tab 
function displayPage() {
  let current = this.parentNode.getAttribute("data-current");
  document.getElementById("tabnav_" + current).setAttribute("style","background-color: #fff");
  document.getElementById("tabpage_" + current).style.display="none";

  let ident = this.id.split("_")[1];
  this.setAttribute("style","background-color: #f00");
  document.getElementById("tabpage_" + ident).style.display="block";
  this.parentNode.setAttribute("data-current",ident);
}
</script>
</head>
<body>
<div class="tabcontainer">
   <div class="tabnavigation">
      <ul>
         <li id="tabnav_1">Page One</li>
         <li id="tabnav_2">Page Two</li>
         <li id="tabnav_3">Page Three</li>
      </ul>
   </div>

   <div class="tabpages">
      <div class="tabpage" id="tabpage_1">
         <p>page 1</p>
      </div>
      <div class="tabpage" id="tabpage_2">
         <p>page 2</p>
      </div>
      <div class="tabpage" id="tabpage_3">
         <p>page 3</p>
      </div>
   </div>
</div>
<div class="tabcontainer">
   <div class="tabnavigation">
      <ul>
         <li id="tabnav_4">Page Two One</li>
         <li id="tabnav_5">Page Two Two</li>
       </ul>
    <div>

    <div class="tabpages">
       <div class="tabpage" id="tabpage_4">
          <p>Page 4</p>
       </div>
       <div class="tabpage" id="tabpage_5">
          <p>Page 5</p>
       </div>
    </div>
</div>
</body>
</html>



PreviousNext

Related