如何添加下一个上一个按钮以更改javascript中的标签内容？

Question

我正在尝试使用html css java script创建选项卡。在单击选项卡时，将转到相应的选项卡内容。   在点击      转到标签2转到选项卡2。      转到选项卡转到上一个标签。

我想添加上一个和下一个按钮以在标签之间切换。（参考图片）

如何实现？

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>

我想使用Java脚本添加下一个上一个按钮，以在标签之间切换。

Answer 1

这是您的代码段的有效示例。

  

更新

为了获得清晰的状态，我删除了很多代码。也许您的应用程序的另一部分需要其中的一些。

使用类和id标识dom元素（tabHeader_1，tabpage_1，...）时，无需使用事件目标来查找/隐藏查找元素。

// 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

您正在寻找的内容可以在此博客take a look at here

中找到

Answer 4

我正在分享一个重定向演示。以此为参考进行理解。我得到你想要的。为此，您必须阅读HTML5'iFrames'。它将使您对任务有更多了解。

尝试了解此演示中发生的情况，您将逐渐了解实际想要的内容。 ：

Demo example for your query