Как добавить следующую предыдущую кнопку, чтобы изменить содержимое вкладки в javascript?

Я пытаюсь создать вкладки с помощью java-скрипта html css. При нажатии на вкладку происходит переход к содержимому соответствующей вкладки. Здесь, в этом коде при нажатии ПЕРЕЙДИТЕ НА ВКЛАДКУ 2 для перехода на вкладку 2. ПЕРЕЙТИ НА ВКЛАДКУ для перехода на предыдущую вкладку.

Я хочу добавить кнопки «Назад» и «Далее» для переключения между вкладками. (См. Изображение) Как добавить следующую предыдущую кнопку, чтобы изменить содержимое вкладки в javascript?

Как этого добиться?

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, и создать общий селектор вкладок вместо выбора фиксированных id. Таким образом, вы можете просто добавить или вычесть один для следующего / предыдущего.

— Lain 18.07.2018 08:25
javascript html css
18.07.2018 08:16
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
1 117
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

может быть то, что вы ищете, доступно в этом блоге взгляни сюда

Это то, что мне нужно. Я получаю много образцов в jquery. Но мне нужно сделать это с помощью java-скрипта.

— Jasmine Joseph 18.07.2018 08:35
18.07.2018 08:33

Делюсь демонстрацией перенаправления. Используйте это как ссылку, чтобы понять. Я получил то, что ты хочешь. Для этого вы должны прочитать HTML5 «iFrames». Это даст вам больше информации о вашей задаче.

Попытайтесь понять, что происходит в этой демонстрации, и вы узнаете, чего на самом деле хотите. :

Демо-пример для вашего запроса

18.07.2018 08:42
Ответ принят как подходящий

Вот рабочий пример вашего снайплета.

Update

Я удаляю большую часть вашего кода, чтобы иметь четкое состояние. Возможно, что-то из этого было необходимо другой части вашего приложения.

Поскольку вы используете класс и идентификатор для идентификации своего элемента 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 вкладки. Мне нужна вкладка типа карусель. (т. е. при нажатии кнопки «Далее» скрытые вкладки должны появиться в заголовке

— Jasmine Joseph 18.07.2018 09:18

Я добавил новую переменную, которая хранит количество вкладок. Кстати, ваш код Javascript можно упростить. Если вам интересно, я могу начать медленно и постепенно обновлять ответ.

— Camille 18.07.2018 09:27

Да, хорошо. Не торопитесь, обновляйтесь. Так что я тоже смогу узнать что-то новое. Это будет очень полезно в дальнейшем.

— Jasmine Joseph 18.07.2018 09:32
18.07.2018 08:54 

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>

Спасибо, код очень упрощен, это было полезно.

— Jasmine Joseph 18.07.2018 09:33
18.07.2018 09:20

Другие вопросы по теме

Пауза загрузчика пирога холста javascript при загрузке
Пакет asp.net mvc 5 jquery не работает
Боковое меню не отображается в Internet Explorer 11
Как остановить поток содержимого страницы в SideNav Semantic-ui
Jquery буферизует весь аудиофайл и готов к его воспроизведению
XSLT: организация таблиц HTML для печати
Веб-сайт Bootstrap 4 автоматически увеличивается в мобильном браузере
Как сделать диапазон ввода с двумя значениями, от и до
Как сохранить файл из URL в blob
Jquery создать объект динамически не работает

Похожие вопросы

Как перебирать значение последовательности в MarkLogic?
Регулярное выражение для игнорирования начальных символов при повторении при выборке подстроки
Как сделать запрос с телом закодированной структуры url-формы?
Reacter router dom не работает
Пауза загрузчика пирога холста javascript при загрузке
Ссылка на привязку на другой странице с плавной прокруткой
Ошибка прерывания NPM в nodejs
Как остановить поток содержимого страницы в SideNav Semantic-ui
Jquery буферизует весь аудиофайл и готов к его воспроизведению
Получение обещания