Добрый день!
Имеется страница с вкладками на html и css, как сделать ссылку с другой страницы на определенную вкладку?
.tabs {
max-width: 90%;
float: none;
list-style: none;
padding: 0;
margin: 15px auto;
border-bottom: 4px solid #ccc;
}
.tabs:after {
content: '';
display: table;
clear: both;
}
.tabs input[type=radio] {
display:none;
}
.tabs label p {
padding: 5px;
margin-right: 0;
}
.tabs label {
display: block;
float: left;
width: 30%;
color: #ccc;
font-size: 20px;
font-weight: normal;
text-decoration: none;
text-align: center;
line-height: 2;
cursor: pointer;
box-shadow: inset 0 4px #ccc;
border-bottom: 4px solid #ccc;
-webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */
transition: all 0.5s;
}
.tabs label span {
display: none;
}
.tabs label:hover {
color: #5faee3;
box-shadow: inset 0 4px #5faee3;
border-bottom: 4px solid #5faee3;
}
.tab-content {
display: none;
width: 100%;
float: left;
padding: 15px;
box-sizing: border-box;
background-color:#ffffff;
}
.tabs [id^="tab"]:checked + label {
background: #FFF;
box-shadow: inset 0 4px #3498db;
border-bottom: 4px solid #3498db;
color: #3498db;
}
#tab-first:checked ~ #tab-content-1,
#tab-second:checked ~ #tab-content-2,
#tab-three:checked ~ #tab-content-3
{
display: block;
}
<div class="tabs">
<!-- Кнопка-переключатель и название первого таба -->
<input type="radio" name="tabs" id="tab-first" checked >
<label for="tab-first">
<p>Первая вкладка</p>
</label>
<!-- Кнопка-переключатель и название второго таба -->
<input type="radio" name="tabs" id="tab-second">
<label for="tab-second">
<p>Вторая вкладка</p>
</label>
<input type="radio" name="tabs" id="tab-three">
<label for="tab-three">
<p>Третья вкладка</p>
</label>
<!-- Вывод контента наших табов -->
<div id="tab-content-1" class="tab-content">
<p>
Описание первой вкладки
</p>
</div> <!-- #tab-content-1 -->
<div id="tab-content-2" class="tab-content">
<p>
Описание второй вкладки
</p>
</div> <!-- #tab-content-2 -->
<div id="tab-content-3" class="tab-content">
<p>
Описание третьей вкладки
</p>
</div> <!-- #tab-content-3 -->
</div>