Как сделать переключение между вкладками?

Question

[pikla]

Добрый день, помогите создать несколько вкладок на странице что бы можно было переключатся между ними.
Пример https://products.drweb.ru/win/security_space там где (Купить, Возможности, Компоненты..)
Желательно на HTML и CSS.
Спасибо.

Answer 1

[Сергей Иванов]

так

Comments

[Aleksandr]

Шикарно)

[pikla]

Спасибо большое!

Answer 2

[Виталий Инчин ☢]

На самом деле, все просто, но дольше объяснять, чем просто дать ссылку нна готовый плагин: Ion.Tabs.

Comments

[geek01]

Есть в jQuery UI tabs - https://jqueryui.com/tabs/

[pikla]

Спасибо большое!

[Serj-One]

geek01: Он слишком громоздок.

Answer 3

[Андрей Хомлюк]

Типа такого, первый html, второй css, делал на прошлой работе для себя.

<dl class="tabs">
				<dt class="selected black">Мониторинг</dt>
				<dd class="selected">
					<div class="tab-content">
					<div id="wrapper">
					
											<div id="row1">
    <strong>Registrator</strong>
	<ul>
	<li><a href="http://172.16.100.47/">Reg 1 (1094)</a></li>
	<li><a href="http://172.16.100.35/">Reg 2 (1094)</a></li>
	<li><a href="http://172.16.100.37/">Cam 1</a></li>
	<li><a href="http://172.16.100.38/">Cam 2</a></li>
	<li><a href="http://172.16.100.39/">Cam 3</a></li>
	<li><a href="http://172.16.100.41/">Cam 4</a></li>
</ul>
</div>
					
					
					<div id="row1 clear">
					<strong>Monitoring</strong>
					<ul>
				<li><a href="https://172.16.90.10:8443/ls/default.aspx">Lan Sweeper</a></li>
	<li><a href="http://172.16.90.22">Zabbix</a></li>
	<li><a href="http://172.16.90.91">Graylog</a></li>
	<li><a href="#">Dude - 172.16.1.157</a></li>
	<li><a href="http://www.pulkovoairport.ru/">Web Site</a>
	<?php
$url = 'http://pulkovoairport.ru';
ini_set('default_socket_timeout', '10');
$fp = fopen($url, "r");
$res = fread($fp, 500);
fclose($fp);
if (strlen($res) > 0) 
  echo '<img src="ok.png"></img>';
else 
  echo '<img src="neok.png"></img>';
?>
	</li>
	</ul>
	</div>
					
<div class="wrapper2">
					
				</dd>
				
					<dt class="black">Управление</dt>
				<dd>
				<div class="tab-content">
				<div id="wrapper2">

	<div id="row1">
 <strong>Blade 1003</strong>
 <ul>
 <li><a href="http://172.16.50.190">Blade</a></li>
<li><a href="http://172.16.50.140">SW 01</a></li>
<li><a href="http://172.16.50.141">SW 02</a></li>
<li><a href="http://172.16.50.132">SW 07 Up</a></li>
<li><a href="http://172.16.50.133">SW 08 Down</a></li>
</ul>
</div>
	<div id="row1">
<strong>Blade 1094</strong>
 <ul>
<li><a href="http://172.16.50.189">Blade</a></li>
<li><a href="http://172.16.50.142">SW 03</a></li>
<li><a href="http://172.16.50.143">SW 04</a></li>
<li><a href="http://172.16.50.134">SW 05 Up</a></li>
<li><a href="http://172.16.50.135">SW 06 Down</a></li>
</ul>
</div>

body {
				background-image:url(../img/grey.png); 
				color:#000;
				font-family:Lucida Console;
				line-height:1.6;
			}
			
			#page {
				width:70%;
				margin:10px auto;
			}
			
			
			.tabs {
				width:100%;
				overflow:hidden;
				font-size:0.9em;
				margin:2em 0;
				zoom: 1;
				padding:1px;
				position:relative;
			}
			
			.tabs dt {
				float:left;
				line-height:2;
				height:2em;
				background:#e8f0f5;
				border:1px solid #e8f0f5;
				border-bottom:0;
				padding:0 1em;
				position:relative;
				left:35px;
				margin-right:1px;
				cursor:pointer;
				
				-webkit-border-top-left-radius:10px;
				-webkit-border-top-right-radius:10px;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
			}
			
			.tabs dt:hover {
				background-color:#bfdff4;
			}
			
			.tabs dt.selected {
				border-color:#b0d0e9;
				background:#fff;
				z-index:3;
				cursor:auto;
			}
			
			.tabs dd {
				background:#fff;
				display:none;
				float:right;
				width:100%;
				margin:2em 0 0 -100%;
				position:relative;
				z-index:2;
			}
			
			.tabs dd.selected {
				display:block;
			}
			
			.tabs .tab-content {
				border:1px solid #b0d0e9;
				padding:20px;
				
				-webkit-border-radius:20px;
				-moz-border-radius:20px;
				border-radius:20px;
			}
			
			.red {
			color: red;
			font-weight: bold;
			}
			
			.black {
			color: #2464b2;
			font-weight: 700;
			}
			
			.center {
			text-align: center;
			}
			
			a {
 
-moz-transition: color 0.2s 0.02s ease;
 -o-transition: color 0.2s 0.02s ease;
 -webkit-transition: color 0.2s 0.02s ease;
 color:#222;
 }
 
a:hover {
 color: #1FA2E1;
 }
 

#right { 
        float:left; 
		width:240px;
		clear:both;
        }
		
		#left { 
        float:left; 
		width:180px;
		clear:both;
        }

#clear {
				clear:both;
        }

		
#wrapper {
width:500px;
height: 250px;
}

br {margin-top:0px;margin-bottom:0px;}

#row {
    float:left; 
		width:240px;
			
        }

		#row1 {
    float:left; 
		width:180px;
			display: block;
        }
		
		#row5 {
    float:left; 
		width:220px;
			display: block;
        }
		
		#distr {
    float:left; 
		width:220px;
			display: block;
        }
		
		#distr2 {
    float:left; 
		width:440px;
			display: block;
			margin-bottom:20px;
        }
		
				#wrapd {
width:800px;
height: 300px;
display: block;
}
		
		
		#vm {
    float:left; 
		width:250px;
			display: block;
        }
		
		#wrapper2 {
width:800px;
height: 300px;
display: block;
}

.socialBox {
	color:#666;
	display:inline-block;
	*display:inline;
	zoom: 1;
}

.socialBox .vk, .socialBox .fb, .socialBox .lj, .socialBox .tw, .socialBox .yt {
	display:inline-block;
	zoom:1;
	width: 18px;
	height:18px;
	background-image: url('../img/socials.png');
	background-color: transparent;
	margin-right:3px;
	text-align: center;
}

.socialBox .vk {
	background-position: 0 0;
}
.socialBox .fb {
	background-position: -26px 0;
}
.socialBox .lj {
	background-position: -50px 0;
}
.socialBox .tw {
	background-position: -78px 0;
	width:21px;
}
.socialBox .yt {
	background-position: -109px 0;
}

Comments

[pikla]

Спасибо большое!