vladyio · November 27, 2016 05:42
diff --git a/Вкладки.html b/Вкладки.html
 <!DOCTYPE html>

 <html>
 <head>
 	<title>WonderTab</title>
 	<meta charset="utf-8"/>
 	<style type="text/css">
 		p, ul{margin:0;	padding:0;}
 		
 		/*start tabs */
 		#tabs {
 			font-size: 12px;
 			list-style-type: none;
 			float:left; 
 			background-color: #a4a7ac;
 			border-radius: 6px 6px 0 0;
 			-moz-box-shadow: 0 0 5px #aaa;
 			-webkit-box-shadow: 0 0 5px #aaa;
 			box-shadow: 0 0 5px #aaa;
 			margin-left:95px;
 			margin-top:10px;
 		}
 		 
 		.tab {
 			float: left;
 			border: 1px solid #a4a7ac;
 			padding:6px 30px;
 			color: #353535;
 			font-weight:bold;
 			font-size:11px;
 			border-radius: 6px 6px 0 0;
 		}
 		 
 		.tab:hover {
 			color:#000;
 			cursor:pointer;
 		}
 		 
 		.tab.active {
 			background-color: #fff;
 			border: 1px solid #fff;
 			border-radius: 6px 6px 0 0;
 			color:#CC0000;
 		}
 		 
 		.tab.active a {
 			float: left;
 			display: block;
 			color: #666666;
 			padding: 5px;
 			cursor: default;
 		}
 		/*stop tabs */
 		
 		/*start tab content */
 		#tabs_content{
 			background:#fff;
 			z-index:1000;
 			position:relative;
 			color:#2f2f2f;
 			border-radius: 3px;
 			clear:both;
 			width:320px;
 			padding:30px 10px 50px; 
 			-moz-box-shadow: 0 0 7px #5B6573;
 			-webkit-box-shadow: 0 0 7px #5B6573;
 			box-shadow: 0 0 7px #5B6573;
 			margin-left:95px;
 			border: 1px solid #a6a6a6;
 		}
 		.tab_content{
 			display:none;
 		}
 		.tab_content.active{
 			display:block;
 		}
 		/*stop tab content */
 	</style>
 </head>

 <body>
 <!--Чтобы js правильно работал не забудьте расставить порядковые номера у id вкладок (тег li), у id блоков с контентом и переменных вызываемой функции onclick="funcTab(N);". Иначе могут возникать ошибки. -->
 <div id="tab_block">
   <ul id="tabs">
     <li id="tab1" class="tab active" onclick="funcTab(1);">Tab1</li>
     <li id="tab2" class="tab" onclick="funcTab(2);">Tab2</li>
     <li id="tab3" class="tab" onclick="funcTab(3);">Tab3</li>
     <li id="tab4" class="tab" onclick="funcTab(4);">Tab4</li>
   </ul>
   <div id="tabs_content">
     <div class="tab_content active" id="tab_content1">
       <p>Tab1 The quick brown fox jumps over the lazy dog</p>
     </div>
     <div class="tab_content" id="tab_content2">
       <p>Tab2 The quick brown fox jumps over the lazy dog</p>
     </div>
     <div class="tab_content" id="tab_content3">
       <p>Tab3 The quick brown fox jumps over the lazy dog</p>
     </div>
     <div class="tab_content" id="tab_content4">
       <p>Tab4 The quick brown fox jumps over the lazy dog</p>
     </div>
   </div>
 </div>

 <script type="text/javascript">
 //функция funcTab(n) вызывается событием onclick на вкладке. N - номер вкладки, на которой кликнули
 function funcTab(n) {
 //получаем количество вкладок по классу. В нашем случае их - 4
   var NTab = document.getElementsByClassName('tab').length;
 //запускаем цикл по количеству табов. Начинаем с 1, а не 0, чтобы удобнее было подставлять значение счетчика в айдишники
  for (var i=1; i < NTab+1; i++) {
 //если значение счетчика цикла не равно номеру вкладки, на которую кликаем
    if (i != n){
 //текущая вкладка может быть активна или не активна, поэтому для гарантии делаем текущую вкладку все равно не активной, пропуская вкладку, на которой кликнули
     document.getElementById('tab'+i).className = 'tab';
 //тоже самое делаем для блоков с контентом
     document.getElementById('tab_content'+i).className = 'tab_content'
     }
  }
 //теперь делаем таб, на котором кликнули, активным, меняя у него класс
   document.getElementById('tab'+n).className = 'tab active';
 //тоже самое для блока с контентом
   document.getElementById('tab_content'+n).className = 'tab_content active';
 }
 </script>

 </body>
	<!DOCTYPE html>

	<html>
	<head>
	<title>WonderTab</title>
	<meta charset="utf-8"/>
	<style type="text/css">
	p, ul{margin:0; padding:0;}

	/start tabs /
	#tabs {
	font-size: 12px;
	list-style-type: none;
	float:left;
	background-color: #a4a7ac;
	border-radius: 6px 6px 0 0;
	-moz-box-shadow: 0 0 5px #aaa;
	-webkit-box-shadow: 0 0 5px #aaa;
	box-shadow: 0 0 5px #aaa;
	margin-left:95px;
	margin-top:10px;
	}

	.tab {
	float: left;
	border: 1px solid #a4a7ac;
	padding:6px 30px;
	color: #353535;
	font-weight:bold;
	font-size:11px;
	border-radius: 6px 6px 0 0;
	}

	.tab:hover {
	color:#000;
	cursor:pointer;
	}

	.tab.active {
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 6px 6px 0 0;
	color:#CC0000;
	}

	.tab.active a {
	float: left;
	display: block;
	color: #666666;
	padding: 5px;
	cursor: default;
	}
	/stop tabs /

	/start tab content /
	#tabs_content{
	background:#fff;
	z-index:1000;
	position:relative;
	color:#2f2f2f;
	border-radius: 3px;
	clear:both;
	width:320px;
	padding:30px 10px 50px;
	-moz-box-shadow: 0 0 7px #5B6573;
	-webkit-box-shadow: 0 0 7px #5B6573;
	box-shadow: 0 0 7px #5B6573;
	margin-left:95px;
	border: 1px solid #a6a6a6;
	}
	.tab_content{
	display:none;
	}
	.tab_content.active{
	display:block;
	}
	/stop tab content /
	</style>
	</head>

	<body>
	<!--Чтобы js правильно работал не забудьте расставить порядковые номера у id вкладок (тег li), у id блоков с контентом и переменных вызываемой функции onclick="funcTab(N);". Иначе могут возникать ошибки. -->
	<div id="tab_block">
	<ul id="tabs">
	<li id="tab1" class="tab active" onclick="funcTab(1);">Tab1</li>
	<li id="tab2" class="tab" onclick="funcTab(2);">Tab2</li>
	<li id="tab3" class="tab" onclick="funcTab(3);">Tab3</li>
	<li id="tab4" class="tab" onclick="funcTab(4);">Tab4</li>
	</ul>
	<div id="tabs_content">
	<div class="tab_content active" id="tab_content1">
	<p>Tab1 The quick brown fox jumps over the lazy dog</p>
	</div>
	<div class="tab_content" id="tab_content2">
	<p>Tab2 The quick brown fox jumps over the lazy dog</p>
	</div>
	<div class="tab_content" id="tab_content3">
	<p>Tab3 The quick brown fox jumps over the lazy dog</p>
	</div>
	<div class="tab_content" id="tab_content4">
	<p>Tab4 The quick brown fox jumps over the lazy dog</p>
	</div>
	</div>
	</div>

	<script type="text/javascript">
	//функция funcTab(n) вызывается событием onclick на вкладке. N - номер вкладки, на которой кликнули
	function funcTab(n) {
	//получаем количество вкладок по классу. В нашем случае их - 4
	var NTab = document.getElementsByClassName('tab').length;
	//запускаем цикл по количеству табов. Начинаем с 1, а не 0, чтобы удобнее было подставлять значение счетчика в айдишники
	for (var i=1; i < NTab+1; i++) {
	//если значение счетчика цикла не равно номеру вкладки, на которую кликаем
	if (i != n){
	//текущая вкладка может быть активна или не активна, поэтому для гарантии делаем текущую вкладку все равно не активной, пропуская вкладку, на которой кликнули
	document.getElementById('tab'+i).className = 'tab';
	//тоже самое делаем для блоков с контентом
	document.getElementById('tab_content'+i).className = 'tab_content'
	}
	}
	//теперь делаем таб, на котором кликнули, активным, меняя у него класс
	document.getElementById('tab'+n).className = 'tab active';
	//тоже самое для блока с контентом
	document.getElementById('tab_content'+n).className = 'tab_content active';
	}
	</script>

	</body>