How to add next previous button to change the tab content in javascript?

Question

I am trying to create tabs using html css java script . On clicking the tab it goes to respective tab content.Here in this code on clicking GO TO TAB2 to goes to tab 2. GO TO TAB to goes to previous tab.

I want to add previous and Next button to switch between tabs.(ref image)

How to achieve this?

window.onload=function() {

  // get tab container
  	var container = document.getElementById("tabContainer");
	var tabcon = document.getElementById("tabscontent");
		//alert(tabcon.childNodes.item(1));
    // set current tab
    var navitem = document.getElementById("tabHeader_1");
		
    //store which tab we are on
    var ident = navitem.id.split("_")[1];
		//alert(ident);
    navitem.parentNode.setAttribute("data-current",ident);
    //set current tab with class of activetabheader
    navitem.setAttribute("class","tabActiveHeader");

    //hide two tab contents we don't need
   	 var pages = tabcon.getElementsByTagName("div.tabpage");
    	for (var i = 1; i < pages.length; i++) {
     	 pages.item(i).style.display="none";
		}

    //this adds click event to tabs
    var tabs = container.getElementsByTagName("li");
	
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].onclick=displayPage;
    }
	
	
	
	
	// get tab container 2
  	var container2 = document.getElementById("tabContainer2");
	var tabcon2 = document.getElementById("tabscontent2");
 
    var navitem2 = document.getElementById("tabHeader2_1");
		
    //store which tab we are on
    var ident2 = navitem2.id.split("_")[1];
		//alert(ident2);
    navitem2.parentNode.setAttribute("data-current",ident2);
    //set current tab with class of activetabheader
    navitem2.setAttribute("class","tabActiveHeader");

    //hide two tab contents we don't need
   	 var pages2 = tabcon2.getElementsByTagName("div.tabpage2");
    	for (var i = 1; i < pages2.length; i++) {
     	 pages2.item(i).style.display="none";
		}

    //this adds click event to tabs
    var tabs2 = container2.getElementsByTagName("li");
    for (var i = 0; i < tabs2.length; i++) {
      tabs2[i].onclick=displayPage2;
    }
	
	

	
	// get tab container 3
  	var container3 = document.getElementById("tabContainer3");
	var tabcon3 = document.getElementById("tabscontent3");
		//alert("TAB3: "+tabcon3.childNodes.item(1));
    // set current tab
    var navitem3 = document.getElementById("tabHeader3_1");
		
    //store which tab we are on
    var ident3 = navitem3.id.split("_")[1];
		//alert(ident);
    navitem3.parentNode.setAttribute("data-current",ident3);
    //set current tab with class of activetabheader
    navitem3.setAttribute("class","tabActiveHeader");

    //hide two tab contents we don't need
   	 var pages3 = tabcon3.getElementsByTagName("div.tabpage3");
    	for (var i = 1; i < pages3.length; i++) {
     	 pages3.item(i).style.display="none";
		}

    //this adds click event to tabs
    var tabs3 = container3.getElementsByTagName("li");
    for (var i = 0; i < tabs3.length; i++) {
      tabs3[i].onclick=displayPage3;
    }
	 
	
	};
	
		
	
		
// on click of first tabs
function displayPage(event) {
	
	for (var i = 0; i < event.target.parentElement.childElementCount; i++) {
      if(event.target.parentElement.children[i].id == event.target.id)
	  {
		document.getElementById(event.target.id).setAttribute("class","tabActiveHeader");
		document.getElementById(document.getElementsByClassName('tabpage')[i].id).style.display="block";
	  }
	  else
	  {
		document.getElementById(event.target.parentElement.children[i].id).removeAttribute("class");
		document.getElementById(document.getElementsByClassName('tabpage')[i].id).style.display="none";
	  }
    }
	
}


//Tab 2
function displayPage2(event) {
	for (var i = 0; i < event.target.parentElement.childElementCount; i++) {
      if(event.target.parentElement.children[i].id == event.target.id)
	  {
		document.getElementById(event.target.id).setAttribute("class","tabActiveHeader");
		document.getElementById(document.getElementsByClassName('tabpage2')[i].id).style.display="block";
	  }
	  else
	  {
		document.getElementById(event.target.parentElement.children[i].id).removeAttribute("class");
		document.getElementById(document.getElementsByClassName('tabpage2')[i].id).style.display="none";
	  }
    }
}



//Tab 3
function displayPage3(event) {
	for (var i = 0; i < event.target.parentElement.childElementCount; i++) {
      if(event.target.parentElement.children[i].id == event.target.id)
	  {
		document.getElementById(event.target.id).setAttribute("class","tabActiveHeader");
		document.getElementById(document.getElementsByClassName('tabpage3')[i].id).style.display="block";
	  }
	  else
	  {
		document.getElementById(event.target.parentElement.children[i].id).removeAttribute("class");
		document.getElementById(document.getElementsByClassName('tabpage3')[i].id).style.display="none";
	  }
    }
} 
 
  

  function goToTab2() {

		document.getElementById("tabHeader_1").removeAttribute("class","tabActiveHeader");
		document.getElementById("tabHeader_3").removeAttribute("class","tabActiveHeader");
		document.getElementById("tabHeader_2").setAttribute("class","tabActiveHeader");
		
		document.getElementById("tabpage_1").setAttribute("style", "display: none");
		document.getElementById("tabpage_3").setAttribute("style", "display: none");
		document.getElementById("tabpage_2").setAttribute("style", "display: block");
	}
	
  function goToTab1() {
	
		document.getElementById("tabHeader_2").removeAttribute("class","tabActiveHeader");
		document.getElementById("tabHeader_3").removeAttribute("class","tabActiveHeader");
		document.getElementById("tabHeader_1").setAttribute("class","tabActiveHeader");
		
		document.getElementById("tabpage_2").setAttribute("style", "display: none");
		document.getElementById("tabpage_3").setAttribute("style", "display: none");
		document.getElementById("tabpage_1").setAttribute("style", "display: block");
	}

	body {
	font-family: arial;
}
.tabContainer  {
 
	padding:15px;
	-moz-border-radius: 4px;
	border-radius: 4px; 
}
.tabs{
	overflow:hidden;
}
.tabs > ul{
	font: 1em;
	list-style:none;
}
.tabs > ul > li {
	margin:0 2px 0 0;
	padding:7px 10px;
	display:block;
	float:left;
	color:#333;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-top-left-radius:4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px; 
	
	background: #FFFFFF; /* old browsers */
	background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
	cursor:pointer;
	border: 1px #ccc solid;
}
.tabs > ul > li:hover {
	color:#ccc;
	background: #C9C9C9; /* old browsers */
	background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); /* webkit */
}
.tabs > ul > li.tabActiveHeader {
	color:#FFF;
	color: #333background: #C9C9C9; /* old browsers */
	background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); /* webkit */
}
.tabscontent {
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-top-left-radius: 0px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px; 
	padding:10px 10px 25px;
	background: #FFFFFF; /* old browsers */
	background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 90%, #e4e9ed 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(90%,#FFFFFF), color-stop(100%,#e4e9ed)); /* webkit */
	margin:0;
	color:#333;
	border: 1px #ccc solid;
}
.gototab {
	cursor: pointer;
	background: green;
	color: #fff;
	padding: 10px;
	height: 30px;
	line-height: 30px;
	width: 100px;
	text-align: center;
	float: left;
	margin: 10px;
}

<div id="tabContainer" class="tabContainer">
    <div class="tabs" id="tabs">
      <ul>
        <li id="tabHeader_1">Page 1</li>
        <li id="tabHeader_2">Page 2</li>
        <li id="tabHeader_3">Page 3</li>
      </ul>
    </div>
    <div id="tabscontent" class="tabscontent">
      <div class="tabpage" id="tabpage_1">
        <h2>Page 1</h2>
        <p>Lorem Ipsum is simply dummy text </p>
		
      </div>
      <div class="tabpage" id="tabpage_2" style="display:none;">
        <h2>Page 2</h2>
        <p>
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
		</p>
      </div>
      <div class="tabpage" id="tabpage_3" style="display:none;">
        <h2>Page 3</h2>
        <p>
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
		</p>
		<p>
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
		</p>
      </div>
    </div>
	</div>
	
	<div class="gototab" onclick="goToTab2(this)">Go to Tab 2 >> </div> 
	<div class="gototab" onclick="goToTab1(this)"> << Go to Tab 1</div>
	
	<div style="clear:both;">&nbsp;<div>
	
	<p style="margin-top: 150px;"></p>

I want to add next previous button using java script to switch between tabs.

Answer 1

Here you have a working example of your sniplet.

Update

I remove a lot of your code in order to have a clear state. Maybe some of it was needed by another part of your application.

As you use class and id to identify your dom element (tabHeader_1, tabpage_1, ...) , no need to play with event target for find elements to display/hide.

// Global var to store active tab index
var activeTabIndex = 1;
var numberOfTabs;

window.onload=function() {
  // get tab container
  var container = document.getElementById("tabContainer");
  // this adds click event to tabs
  var tabs = container.getElementsByTagName("li");
  // dynamic calculation of number of tab
  numberOfTabs = tabs.length;
  // attache on each tab header click event
  tabs[0].onclick=displayPage1;
  tabs[1].onclick=displayPage2;
  tabs[2].onclick=displayPage3;
  // active first tab by default
  goToTabByIndex(1);
};
	

// Tab 1 on-click
function displayPage1(event) {
  goToTabByIndex(1);
}

// Tab 2 on-click
function displayPage2(event) {
  goToTabByIndex(2);
}

// Tab 3 on-click
function displayPage3(event) {
  goToTabByIndex(3);
} 
 
/**
 * Use to display a particular tab
 */ 
function displayTab(tabIndex) {
  document.getElementById("tabHeader_" + tabIndex).setAttribute("class","tabActiveHeader");
  document.getElementById("tabpage_" + tabIndex).setAttribute("style", "display: block");
}
 
/**
 * Use to hide a particular tab
 */ 
function hideTab(tabIndex) {
  document.getElementById("tabHeader_" + tabIndex).removeAttribute("class","tabActiveHeader");
  document.getElementById("tabpage_" + tabIndex).setAttribute("style", "display: none");
}
 
/**
 * Use by previous / next button
 */
function goToTabByDelta(deltaIndex) {
  // Get previous/next tab 
  activeTabIndex = activeTabIndex + deltaIndex;
  if (activeTabIndex > numberOfTabs) { activeTabIndex = 1; }
  if (activeTabIndex < 1) { activeTabIndex = numberOfTabs ; }
  // Loop over every tab 
  for (var i=1; i<=numberOfTabs; i++) {
    if (i == activeTabIndex) {
      displayTab(i);
    } else {
      hideTab(i); 
    }
  }
}

/**
 * Use by tab on-click
 */
function goToTabByIndex(newActiveTabIndex) {
  activeTabIndex = newActiveTabIndex
  // Loop over every tab 
  for (var i=1; i<=numberOfTabs; i++) {
    if (i == newActiveTabIndex) {
      displayTab(i);
    } else {
      hideTab(i); 
    }
  }
}

body {
	font-family: arial;
}
.tabContainer  {
 
	padding:15px;
	-moz-border-radius: 4px;
	border-radius: 4px; 
}
.tabs{
	overflow:hidden;
}
.tabs > ul{
	font: 1em;
	list-style:none;
}
.tabs > ul > li {
	margin:0 2px 0 0;
	padding:7px 10px;
	display:block;
	float:left;
	color:#333;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-top-left-radius:4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px; 
	
	background: #FFFFFF; /* old browsers */
	background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
	cursor:pointer;
	border: 1px #ccc solid;
}
.tabs > ul > li:hover {
	color:#ccc;
	background: #C9C9C9; /* old browsers */
	background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); /* webkit */
}
.tabs > ul > li.tabActiveHeader {
	color:#FFF;
	color: #333background: #C9C9C9; /* old browsers */
	background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); /* webkit */
}
.tabscontent {
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-top-left-radius: 0px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px; 
	padding:10px 10px 25px;
	background: #FFFFFF; /* old browsers */
	background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 90%, #e4e9ed 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(90%,#FFFFFF), color-stop(100%,#e4e9ed)); /* webkit */
	margin:0;
	color:#333;
	border: 1px #ccc solid;
}
.gototab {
	cursor: pointer;
	background: green;
	color: #fff;
	padding: 10px;
	height: 30px;
	line-height: 30px;
	width: 100px;
	text-align: center;
	float: left;
	margin: 10px;
}

<div id="tabContainer" class="tabContainer">
    <div class="tabs" id="tabs">
      <ul>
        <li id="tabHeader_1">Page 1</li>
        <li id="tabHeader_2">Page 2</li>
        <li id="tabHeader_3">Page 3</li>
      </ul>
    </div>
    <div id="tabscontent" class="tabscontent">
      <div class="tabpage" id="tabpage_1">
        <h2>Page 1</h2>
        <p>Lorem Ipsum is simply dummy text </p>
		
      </div>
      <div class="tabpage" id="tabpage_2" style="display:none;">
        <h2>Page 2</h2>
        <p>
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
		</p>
      </div>
      <div class="tabpage" id="tabpage_3" style="display:none;">
        <h2>Page 3</h2>
        <p>
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
		</p>
		<p>
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
		</p>
      </div>
    </div>
	</div>
	
	<div class="gototab" onclick="goToTabByDelta(-1)">Previous</div> 
	<div class="gototab" onclick="goToTabByDelta(+1)">Next</div>
	
	<div style="clear:both;">&nbsp;<div>
	
	<p style="margin-top: 150px;"></p>

Answer 2

var tabs = document.querySelectorAll("[id^='tabHeader_']");
var tabPages = document.getElementsByClassName("tabpage");

for (var i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener("click", function(e) {
    var id = e.target.id.split("_")[1];
    switchTab(id);
  });
}

function switchTab(id) {
  id = parseInt(id);
  var activeTab = document.getElementById("tabHeader_" + id);
  var tabPageId;
  var i;

  for (i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove("tabActiveHeader");
    tabs[i].parentNode.removeAttribute("data-current");
  }

  activeTab.parentNode.setAttribute("data-current", id);
  activeTab.classList.add("tabActiveHeader");

  for (i = 0; i < tabPages.length; i++) {
    tabPageId = parseInt(tabPages[i].id.split("_")[1]);
    if (tabPageId === id) {
      tabPages[i].style.display = "block";
    } else {
      tabPages[i].style.display = "none";
    }
  }
}

function prevTab(){
  var nextTab;
  var currentTab = document.querySelectorAll("[data-current]")[0].getAttribute("data-current");
  if(currentTab > 1){
  	switchTab(currentTab-1);
  }  
}

function nextTab(){
  var nextTab;
  var currentTab = document.querySelectorAll("[data-current]")[0].getAttribute("data-current");
  if(currentTab < tabs.length){
  	switchTab(parseInt(currentTab)+1);
  }  
}

	body {
	  font-family: arial;
	}

	.tabContainer {
	  padding: 15px;
	  -moz-border-radius: 4px;
	  border-radius: 4px;
	}

	.tabs {
	  overflow: hidden;
	}

	.tabs>ul {
	  font: 1em;
	  list-style: none;
	}

	.tabs>ul>li {
	  margin: 0 2px 0 0;
	  padding: 7px 10px;
	  display: block;
	  float: left;
	  color: #333;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  user-select: none;
	  -moz-border-radius-topleft: 4px;
	  -moz-border-radius-topright: 4px;
	  -moz-border-radius-bottomright: 0px;
	  -moz-border-radius-bottomleft: 0px;
	  border-top-left-radius: 4px;
	  border-top-right-radius: 4px;
	  border-bottom-right-radius: 0px;
	  border-bottom-left-radius: 0px;
	  background: #FFFFFF;
	  /* old browsers */
	  background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%);
	  /* firefox */
	  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFFFFF), color-stop(10%, #F3F3F3), color-stop(50%, #F3F3F3), color-stop(100%, #FFFFFF));
	  /* webkit */
	  cursor: pointer;
	  border: 1px #ccc solid;
	}

	.tabs>ul>li:hover {
	  color: #ccc;
	  background: #C9C9C9;
	  /* old browsers */
	  background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%);
	  /* firefox */
	  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0C91EC), color-stop(100%, #257AB6));
	  /* webkit */
	}

	.tabs>ul>li.tabActiveHeader {
	  color: #FFF;
	  color: #333background: #C9C9C9;
	  /* old browsers */
	  background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%);
	  /* firefox */
	  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0C91EC), color-stop(100%, #257AB6));
	  /* webkit */
	}

	.tabscontent {
	  -moz-border-radius-topleft: 0px;
	  -moz-border-radius-topright: 4px;
	  -moz-border-radius-bottomright: 4px;
	  -moz-border-radius-bottomleft: 4px;
	  border-top-left-radius: 0px;
	  border-top-right-radius: 4px;
	  border-bottom-right-radius: 4px;
	  border-bottom-left-radius: 4px;
	  padding: 10px 10px 25px;
	  background: #FFFFFF;
	  /* old browsers */
	  background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 90%, #e4e9ed 100%);
	  /* firefox */
	  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFFFFF), color-stop(90%, #FFFFFF), color-stop(100%, #e4e9ed));
	  /* webkit */
	  margin: 0;
	  color: #333;
	  border: 1px #ccc solid;
	}

	.gototab {
	  cursor: pointer;
	  background: green;
	  color: #fff;
	  padding: 10px;
	  height: 30px;
	  line-height: 30px;
	  width: 100px;
	  text-align: center;
	  float: left;
	  margin: 10px;
	}

<div id="tabContainer" class="tabContainer">
  <div class="tabs" id="tabs">
    <ul data-current="1"> <!-- Initial Tab -->
      <li id="tabHeader_1" class="tabActiveHeader">Page 1</li> <!-- Initial Tab -->
      <li id="tabHeader_2">Page 2</li>
      <li id="tabHeader_3">Page 3</li>
    </ul>
  </div>
  <div id="tabscontent" class="tabscontent">
    <div class="tabpage" id="tabpage_1">
      <h2>Page 1</h2>
      <p>Lorem Ipsum is simply dummy text </p>

    </div>
    <div class="tabpage" id="tabpage_2" style="display:none;">
      <h2>Page 2</h2>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
      </p>
    </div>
    <div class="tabpage" id="tabpage_3" style="display:none;">
      <h2>Page 3</h2>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
      </p>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
      </p>
    </div>
  </div>
</div>

<div class="gototab" onclick="prevTab()"><< Prev</div>
<div class="gototab" onclick="nextTab()">Next >></div>

    <div style="clear:both;">&nbsp;
      <div>

        <p style="margin-top: 150px;"></p>

Answer 3

I'm sharing a demo for redirecting. Use this as reference to understand. I got you what you want. For that you have to read HTML5 'iFrames'. It'll give you more glimps about your task.

Try to understand what happens in this demo and you will come to know what you want actually. :

Demo example for your query

Answer 4

may be what you are looking for is available in this blog take a look at here