Открывания табов по якорю в ссылке
Здравствуйте.
Сделал небольшое окно с табами, и по инструкциям в интернете с помощью jquery смог реализовать переключение. Но возникла проблема, надо чтобы при переходе по ссылке с якорем (site.ru/#tab2) автоматически переключался на нужный таб. Подскажите как можно это реализовать? За любую информацию буду благодарен, т.к. очень слаб в javascript и jquery Ссылка на табы https://codepen.io/anon/pen/bQyqgr?editors=1010 Спасибо |
document.location.hash //вернет hash
onhashchange = function(){
// тут обработка события изменения хеша
};
остальное то же самое как и по клику |
1111,
<li><a title="" class="btn" href="#tab1">sp13 Ink</a></li>
<li><a title="" class="btn" href="#tab2">sp14 Foxy</a></li>
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
padding: 50px;
}
div {
box-sizing: border-box;
}
.container {
box-shadow: 0 0 10px 1px #cccccc;
width: 976px;
border-top: none;
border-radius: 6px;
}
.cleafix {
content: "";
display: table;
clear:both;
}
/* табы */
.btn {
font-size: 14px;
color: inherit;
font-family: "Helvetica";
text-align: center;
padding: 5px 20px;
text-decoration: none;
}
#active {
color: #fff;
background-color: #C71D1A;
}
.active {
color: #fff !important;
background-color: #C71D1A;
}
.tabs {
width: 100%;
font-weight: bold;
}
.tabs {
overflow: auto;
list-style: none;
text-transform: uppercase;
padding: 0px;
margin: 0px;
}
.tabs li{
box-shadow: 0 0 5px 0px #cccccc;
color: #C71D1A;
float: left;
border: 2px solid #cccccc;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2px;
}
.tabs li:nth-child(-n+4){
border-radius: 0px 0px 10px 10px;
}
.tabs li:not(:nth-child(-n+4)) {
border-top: none;
}
.tabs li:nth-child(n+4){
border-radius: 0px 0px 10px 10px;
}
.tabs li:nth-child(1){
border-radius: 5px 0px 10px 10px;
}
.tabs li:nth-child(4){
border-radius: 0px 5px 10px 10px;
}
.tabs li a {
float: left;
width: 200px;
height: 15px;
}
/* Контент табов */
.tab {
width: 100%;
text-align: center;
}
.tab-content h2 {
text-transform: uppercase;
color: #C71D1A;
}
.image-block-left {
float: left;
width:50%;
}
.image-block-right {
float: left;
width: 20%;
}
.image-block-left img {
width: 100%;
}
.image-block-right img {
width: 60%;
display: block;
}
.tab-content{
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('.tabs li').click(function(event){
$('.tabs li').removeClass('active');
$(this).addClass('active');
$('.tab-content').hide();
var activeTab = $(this).find('a').attr('href');
$(activeTab).show();
});
var hash = window.location.hash;
hash ? $("a[href='"+hash+"']").click() : $('.tabs li:first').click()
});
</script>
</head>
<body>
<div class="container">
<ul id="tabs" class="tabs">
<li><a title="" class="btn" href="#tab1">sp13 Ink</a></li>
<li><a title="" class="btn" href="#tab2">sp14 Foxy</a></li>
<li><a title="" class="btn" href="#tab3">sp15 Gray Cloud</a></li>
<li><a class="btn" href="#">sp17 British Green</a></li>
<li><a class="btn" href="#">sp15 Gray Cloud</a></li>
<li><a class="btn" href="#">sp19 Warm Sand</a></li>
<li><a class="btn" href="#">sp20 Sorbet</a></li>
<li><a class="btn" href="#">sp14 Foxy</a></li>
</ul>
<div id="content" class="tab">
<div id="tab1" class="tab-content">
<div class="image cleafix">
<div class="image-block-left">
<img src="http://u8.filesonload.ru/17c7fa4c1f220efcfa8201d8e834c0ca/9f3db0370ab59af37f722f3e52923ae8.jpg">
</div>
<div class="image-block-right">
<img src="http://u8.filesonload.ru/17c7fa4c1f220efcfa8201d8e834c0ca/a80bc4b3029a95b103f3f063e5967f8c.jpg">
<img src="http://u8.filesonload.ru/17c7fa4c1f220efcfa8201d8e834c0ca/0b14bc7445fc00f036993a5a0c0aa376.jpg">
<img src="http://u8.filesonload.ru/17c7fa4c1f220efcfa8201d8e834c0ca/167fc973f04ef17dbabfa43a39826760.jpg">
<img src="http://u8.filesonload.ru/17c7fa4c1f220efcfa8201d8e834c0ca/b8619303f1b4cd9b8dc720df906e83d7.jpg">
</div>
</div>
</div>
<div id="tab2" class="tab-content">
<div class="image cleafix">
<div class="image-block-left">
<img src="http://u8.filesonload.ru/17c7fa4c1f220efcfa8201d8e834c0ca/9f3db0370ab59af37f722f3e52923ae8.jpg">
</div>
<div class="image-block-right">
<img src="http://u8.filesonload.ru/17c7fa4c1f220efcfa8201d8e834c0ca/a80bc4b3029a95b103f3f063e5967f8c.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Цитата:
Цитата:
|
рони
Спасибо. Все получилось) |
рони,
Чтобы стрелки назад/вперед на панели работали. |
j0hnik,
... мне сложно понять, возможно я что-то пропустил. :) |
Рони, И вновь здравствуйте!
Поэкспериментировал с вашим скриптов, все круто, но возник нюанс. При нажатии на ссылку (таб) окно прокручивается к открывающемуся табу (т.к. срабатывает якорь и он соответственно к нему листает) и само меню скрывается за верхний край браузера из-за чего приходится все время пролистатывать назад, чтобы выбрать другую вкладку. И возник вопрос, можно ли сделать так, что весь контент табов сделать с двумя стилями, один стил show с свойством display:block;, второй hide с display:none; А у div-a контентов табов был бы уникальный id При нажатии на ссылку в меню табов (href="#" т.е. без ссылки на таб) в которой был бы title c Названием таба, которой нужно открыть, Js прописывал бы нужному div-у стиль show и li в которой ссылка стиль active (а в этом стиле фон красным у меня прописан, чтобы кнопка стала активной) А если в адресной строке бы присутствовал якорь, Он бы сравнивал с id div-ов и нужному div-у прописывал стиль show, а Li в котором title так же соответствовал этот якорь в ссылке снова прописывал стиль active Или такой JS скрипт будет слишком сложным? |
1111,
ищите темы подобные вашей, на форуме их очень много. засунуть id в title ... без комментариев прочтите учебник, половина ваших вопросов снимется. ниже добавлено event.preventDefault(); и другой эффект смены табов.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
padding: 50px;
}
div {
box-sizing: border-box;
}
.container {
box-shadow: 0 0 10px 1px #cccccc;
width: 976px;
border-top: none;
border-radius: 6px;
}
.cleafix {
content: "";
display: table;
clear:both;
}
/* табы */
.btn {
font-size: 14px;
color: inherit;
font-family: "Helvetica";
text-align: center;
padding: 5px 20px;
text-decoration: none;
}
#active {
color: #fff;
background-color: #C71D1A;
}
.active {
color: #fff !important;
background-color: #C71D1A;
}
.tabs {
width: 100%;
font-weight: bold;
}
.tabs {
overflow: auto;
list-style: none;
text-transform: uppercase;
padding: 0px;
margin: 0px;
}
.tabs li{
box-shadow: 0 0 5px 0px #cccccc;
color: #C71D1A;
float: left;
border: 2px solid #cccccc;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2px;
}
.tabs li:nth-child(-n+4){
border-radius: 0px 0px 10px 10px;
}
.tabs li:not(:nth-child(-n+4)) {
border-top: none;
}
.tabs li:nth-child(n+4){
border-radius: 0px 0px 10px 10px;
}
.tabs li:nth-child(1){
border-radius: 5px 0px 10px 10px;
}
.tabs li:nth-child(4){
border-radius: 0px 5px 10px 10px;
}
.tabs li a {
float: left;
width: 200px;
height: 15px;
}
/* Контент табов */
.tab {
width: 100%;
text-align: center;
}
.tab-content h2 {
text-transform: uppercase;
color: #C71D1A;
}
.image-block-left {
float: left;
width:50%;
}
.image-block-right {
float: left;
width: 20%;
}
.image-block-left img {
width: 100%;
}
.image-block-right img {
width: 60%;
display: block;
}
.tab-content{
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('.tabs li').click(function(event){
event.preventDefault();
$('.tabs li').removeClass('active');
$(this).addClass('active');
$('.tab-content').fadeOut();
var activeTab = $(this).find('a').attr('href');
$(activeTab).fadeIn();
});
var hash = window.location.hash;
hash ? $("a[href='"+hash+"']").click() : $('.tabs li:first').click()
});
</script>
</head>
<body>
<div class="container">
<ul id="tabs" class="tabs">
<li><a title="" class="btn" href="#tab1">sp13 Ink</a></li>
<li><a title="" class="btn" href="#tab2">sp14 Foxy</a></li>
<li><a title="" class="btn" href="#tab3">sp15 Gray Cloud</a></li>
<li><a class="btn" href="#">sp17 British Green</a></li>
<li><a class="btn" href="#">sp15 Gray Cloud</a></li>
<li><a class="btn" href="#">sp19 Warm Sand</a></li>
<li><a class="btn" href="#">sp20 Sorbet</a></li>
<li><a class="btn" href="#">sp14 Foxy</a></li>
</ul>
<div id="content" class="tab">
<div id="tab1" class="tab-content">
<div class="image cleafix">
<div class="image-block-left">
<img src="http://u8.filesonload.ru/17c7fa4c1f220efcfa8201d8e834c0ca/9f3db0370ab59af37f722f3e52923ae8.jpg">
</div>
<div class="image-block-right">
<img src="http://u8.filesonload.ru/17c7fa4c1f220efcfa8201d8e834c0ca/a80bc4b3029a95b103f3f063e5967f8c.jpg">
<img src="http://u8.filesonload.ru/17c7fa4c1f220efcfa8201d8e834c0ca/0b14bc7445fc00f036993a5a0c0aa376.jpg">
<img src="http://u8.filesonload.ru/17c7fa4c1f220efcfa8201d8e834c0ca/167fc973f04ef17dbabfa43a39826760.jpg">
<img src="http://u8.filesonload.ru/17c7fa4c1f220efcfa8201d8e834c0ca/b8619303f1b4cd9b8dc720df906e83d7.jpg">
</div>
</div>
</div>
<div id="tab2" class="tab-content">
<div class="image cleafix">
<div class="image-block-left">
<img src="http://u8.filesonload.ru/17c7fa4c1f220efcfa8201d8e834c0ca/9f3db0370ab59af37f722f3e52923ae8.jpg">
</div>
<div class="image-block-right">
<img src="http://u8.filesonload.ru/17c7fa4c1f220efcfa8201d8e834c0ca/a80bc4b3029a95b103f3f063e5967f8c.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
рони,
Все получилось, благодарю! Пока углубился в css, но потихоньку начну изучать учебник Js. |
| Часовой пояс GMT +3, время: 10:18. |