Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.12.2018, 02:31
Новичок на форуме
Отправить личное сообщение для 1111 Посмотреть профиль Найти все сообщения от 1111
 
Регистрация: 05.12.2018
Сообщений: 4

Открывания табов по якорю в ссылке
Здравствуйте.
Сделал небольшое окно с табами, и по инструкциям в интернете с помощью jquery смог реализовать переключение.
Но возникла проблема, надо чтобы при переходе по ссылке с якорем (site.ru/#tab2) автоматически переключался на нужный таб.
Подскажите как можно это реализовать?
За любую информацию буду благодарен, т.к. очень слаб в javascript и jquery

Ссылка на табы
https://codepen.io/anon/pen/bQyqgr?editors=1010

Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 05.12.2018, 04:02
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,386

document.location.hash //вернет hash

onhashchange = function(){
// тут обработка события изменения хеша
};


остальное то же самое как и по клику
Ответить с цитированием
  #3 (permalink)  
Старый 05.12.2018, 04:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,037

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>
Ответить с цитированием
  #4 (permalink)  
Старый 05.12.2018, 04:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,037

Сообщение от j0hnik
onhashchange
чем это поможет при
Сообщение от 1111
при переходе по ссылке с якорем
Ответить с цитированием
  #5 (permalink)  
Старый 05.12.2018, 18:17
Новичок на форуме
Отправить личное сообщение для 1111 Посмотреть профиль Найти все сообщения от 1111
 
Регистрация: 05.12.2018
Сообщений: 4

рони
Спасибо. Все получилось)
Ответить с цитированием
  #6 (permalink)  
Старый 05.12.2018, 19:06
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,386

рони,
Чтобы стрелки назад/вперед на панели работали.
Ответить с цитированием
  #7 (permalink)  
Старый 05.12.2018, 19:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,037

j0hnik,
... мне сложно понять, возможно я что-то пропустил.
Ответить с цитированием
  #8 (permalink)  
Старый 06.12.2018, 00:44
Новичок на форуме
Отправить личное сообщение для 1111 Посмотреть профиль Найти все сообщения от 1111
 
Регистрация: 05.12.2018
Сообщений: 4

Рони, И вновь здравствуйте!
Поэкспериментировал с вашим скриптов, все круто, но возник нюанс. При нажатии на ссылку (таб) окно прокручивается к открывающемуся табу (т.к. срабатывает якорь и он соответственно к нему листает) и само меню скрывается за верхний край браузера из-за чего приходится все время пролистатывать назад, чтобы выбрать другую вкладку.

И возник вопрос, можно ли сделать так, что весь контент табов сделать с двумя стилями, один стил 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 скрипт будет слишком сложным?
Ответить с цитированием
  #9 (permalink)  
Старый 06.12.2018, 08:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,037

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>
Ответить с цитированием
  #10 (permalink)  
Старый 06.12.2018, 22:52
Новичок на форуме
Отправить личное сообщение для 1111 Посмотреть профиль Найти все сообщения от 1111
 
Регистрация: 05.12.2018
Сообщений: 4

рони,
Все получилось, благодарю!
Пока углубился в css, но потихоньку начну изучать учебник Js.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
автопереход по ссылке если есть якорь по ссылке с якорем jay-S Общие вопросы Javascript 4 15.03.2017 16:52
Сохранить положение скролла при переходе по ссылке Lucia14 Events/DOM/Window 1 31.12.2016 02:14
Прошу помощи довести до ума работу вложенных табов helgajijka jQuery 4 04.11.2015 01:38
Переход по ссылке к якорю на другой странице tvixa Элементы интерфейса 10 01.10.2013 09:19