如何添加下一个上一个按钮以更改 javascript 中的选项卡内容？

【问题标题】：How to add next previous button to change the tab content in javascript?如何添加下一个上一个按钮以更改 javascript 中的选项卡内容？
【发布时间】：2018-07-18 06:16:15
【问题描述】：

我正在尝试使用 html css java script 创建选项卡。单击选项卡时，它会转到相应的选项卡内容。在此代码中 点击时 GO TO TAB2 转到选项卡 2。 GO TO TAB 转到上一个选项卡。

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

如何做到这一点？

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 脚本添加下一个上一个按钮以在选项卡之间切换。

【问题讨论】：

  • 您可以为所有选项卡赋予tabIndex 之类的属性并创建通用选项卡选择器，而不是选择固定的ids。这样你就可以为下一个/上一个添加或减去一个。

标签： javascript html css


【解决方案1】：

这里有一个您的代码片段的工作示例。

更新

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

当您使用 class 和 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>

【讨论】：

  • 谢谢...我在桌面视图中使用了 6 个标签。当来到移动设备时，标签标题被隐藏了。只能看到 3 个选项卡。我需要轮播类型选项卡。（即）单击下一步按钮时，隐藏的选项卡需要出现在标题中
  • 我添加了一个存储标签数量的新变量。顺便说一句，您的 Javascript 代码可以简化。如果你有兴趣，我可以慢慢开始，一步一步的回答更新。
  • 是的，我是。好的，慢慢来更新。这样我也可以学习新的东西。这对进一步进行非常有用
【解决方案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>

【讨论】：

  • 谢谢。代码很简单。很有用。
【解决方案3】：

可能是您正在寻找的内容，请参阅此博客take a look at here

【讨论】：

  • 这是我需要的。我在 jquery 中获得了很多样本​​。但我需要使用 java 脚本来弥补。
【解决方案4】：

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

试着了解这个演示中发生了什么，你就会知道你真正想要什么。 ：

Demo example for your query

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-05-17
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode