Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.12.2017, 10:21
Аватар для stormur
Новичок на форуме
Отправить личное сообщение для stormur Посмотреть профиль Найти все сообщения от stormur
 
Регистрация: 09.12.2017
Сообщений: 6

табы с якорем (переключение вкладок)
Здравствуйте!

Использую своём проекте вкладки со следующей структурой и JS-кодом

<ul class="tabs">
  <li onclick="ChangeUrl('instances', '#instances');" class="active"><span>Instances</span></li>
  <li onclick="ChangeUrl('snapshots', '#snapshots');"><span>Snapshots</span></li>
  <li onclick="ChangeUrl('iso', '#iso');"><span>ISO</span></li>
</ul>

<div class="tabs-content active"> Контент 1 вкладки </div>
<div class="tabs-content"> Контент 2 вкладки </div>
<div class="tabs-content"> Контент 3 вкладки </div>


//Это код для табов
(function($) {
  $(function() {
    $('ul.tabs').on('click', 'li:not(.active)', function() {
      $(this).addClass('active').siblings().removeClass('active')
        .closest('div.center').find('div.tabs-content').removeClass('active').eq($(this).index()).addClass('active');
    });
  });
})($);

//А вот код для присвоения хэштега вкладке
function ChangeUrl(title, url) {
  var obj = {
    Title: title,
    Url: url
  };
  history.pushState(obj, obj.Title, obj.Url);
}


Теперь, собственно, проблема. Помогите, пожалуйста, по хэштегу в адресной строке переходить на необходимую вкладку. Имею в виду - если мне набрать вручную www.url.com/index.html#iso, то я попаду на соответствующую вкладку.

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 10.12.2017, 11:31
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,011

stormur,
<style>
.tabs li.active{
  text-decoration:underline;
}
.tabs-content{
  display:none;
}
.tabs-content.active{
  display:block;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="center">
  <ul class="tabs">
    <li data-tab-id="instances" class="active"><span>Instances</span></li>
    <li data-tab-id="snapshots"><span>Snapshots</span></li>
    <li data-tab-id="iso"><span>ISO</span></li>
  </ul>

  <div class="tabs-content active" data-tab-id="instances"> Контент 1 вкладки </div>
  <div class="tabs-content" data-tab-id="snapshots"> Контент 2 вкладки </div>
  <div class="tabs-content" data-tab-id="iso"> Контент 3 вкладки </div>
</div>
<script>
$(function() {
  $('ul.tabs').on('click', 'li:not(.active)', function() {
    var $t=$(this);
    $t.addClass('active').siblings().removeClass('active')
      .closest('div.center').find('div.tabs-content').removeClass('active').filter('[data-tab-id="'+$t.data('tab-id')+'"]').addClass('active');
      ChangeUrl($t.text(),'#'+$t.data('tab-id'));
  });
  
  if(location.hash.length)
  	$('.tabs [data-tab-id="'+location.hash.substr(1)+'"]').click();
});

//А вот код для присвоения хэштега вкладке
function ChangeUrl(title, url) {
  history.pushState({
    Title: title,
    Url: url
  }, title, url);
}
</script>

Последний раз редактировалось Nexus, 11.12.2017 в 08:08.
Ответить с цитированием
  #3 (permalink)  
Старый 10.12.2017, 14:04
Аватар для stormur
Новичок на форуме
Отправить личное сообщение для stormur Посмотреть профиль Найти все сообщения от stormur
 
Регистрация: 09.12.2017
Сообщений: 6

Ваш код элегантен, Nexus, однако моего вопроса он не решает. Требуется именно переход на вкладку с помощью адресной строки и соответствующего хэштега. В любом случае, спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 10.12.2017, 15:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,856

stormur,
Nexus, вернётся и допишет строку 34, но попробуйте сами ...
Ответить с цитированием
  #5 (permalink)  
Старый 10.12.2017, 15:49
Аватар для stormur
Новичок на форуме
Отправить личное сообщение для stormur Посмотреть профиль Найти все сообщения от stormur
 
Регистрация: 09.12.2017
Сообщений: 6

намёк понял, попробую
но я пока очень слаб в JS, и на данный момент почти наугад всё делаю
чаще не получается, чем получается..
Ответить с цитированием
  #6 (permalink)  
Старый 10.12.2017, 16:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,856

stormur,
8 символов, нужно дописать или чуть больше
Ответить с цитированием
  #7 (permalink)  
Старый 11.12.2017, 08:09
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,011

stormur, в строке 34 нужно было дописать ".click()".
Ответить с цитированием
  #8 (permalink)  
Старый 11.12.2017, 22:09
Аватар для stormur
Новичок на форуме
Отправить личное сообщение для stormur Посмотреть профиль Найти все сообщения от stormur
 
Регистрация: 09.12.2017
Сообщений: 6

спасибо огромное
позволю себе наглость уточнить - как сделать так, чтобы переход через адресную строку по хэштегу на вкладку происходил в том числе при нажатии клавиши 'Enter'? (то есть я набираю www.url.com/index.html#iso, нажимаю 'Enter'..)
Ответить с цитированием
  #9 (permalink)  
Старый 05.04.2018, 23:39
Аспирант
Отправить личное сообщение для Nik_Dev Посмотреть профиль Найти все сообщения от Nik_Dev
 
Регистрация: 26.12.2017
Сообщений: 30

Доброго времени суток.
А возможно сделать открытие tab (вкладки) и переход к якорю?
Заранее благодарю

Имею якорь для комментариев вида: #comment-id-16.
Сделал tab c data-tab-id=#comment, но при переходе по #comment-id-16 переходит к комментарию только если вкладка #comment уже открыта.

ID для перехода по ссылке к комментарию формируется с помощью тега {id}

Возможно ли это реализовать? Подскажите пожалуйста. Буду благодарен.

Посмотреть можно тут

Последний раз редактировалось Nik_Dev, 05.04.2018 в 23:41. Причина: Дополнил
Ответить с цитированием
  #10 (permalink)  
Старый 06.04.2018, 00:08
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Nik_Dev,
https://www.youtube.com/watch?v=sAjA...hLeWwem&t=200s
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
переключение вкладок с помощью кнопки Влад137 Ваши сайты и скрипты 9 23.11.2017 23:27
Табы в табах:) sergey24 Общие вопросы Javascript 1 26.11.2016 08:10
Эффектные вкладки табы - Tabulous.js (div и а хватает все) runyugin Элементы интерфейса 37 03.11.2016 01:06
Socket.IO, общий транспорт для нескольких вкладок Котзилла AJAX и COMET 2 20.04.2015 03:26
Динамические Табы и drag&drop Surlik jQuery 3 15.11.2013 23:53