табы с якорем (переключение вкладок)
Здравствуйте!
Использую своём проекте вкладки со следующей структурой и 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, то я попаду на соответствующую вкладку. Спасибо! |
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, однако моего вопроса он не решает. Требуется именно переход на вкладку с помощью адресной строки и соответствующего хэштега. В любом случае, спасибо!
|
stormur,
Nexus, вернётся и допишет строку 34, но попробуйте сами ... |
намёк понял, попробую ;)
но я пока очень слаб в JS, и на данный момент почти наугад всё делаю чаще не получается, чем получается.. |
stormur,
8 символов, нужно дописать или чуть больше |
stormur, в строке 34 нужно было дописать ".click()".
|
спасибо огромное
позволю себе наглость уточнить - как сделать так, чтобы переход через адресную строку по хэштегу на вкладку происходил в том числе при нажатии клавиши 'Enter'? (то есть я набираю www.url.com/index.html#iso, нажимаю 'Enter'..) |
Доброго времени суток.
А возможно сделать открытие tab (вкладки) и переход к якорю? Заранее благодарю :) Имею якорь для комментариев вида: #comment-id-16. Сделал tab c data-tab-id=#comment, но при переходе по #comment-id-16 переходит к комментарию только если вкладка #comment уже открыта. ID для перехода по ссылке к комментарию формируется с помощью тега {id} Возможно ли это реализовать? Подскажите пожалуйста. Буду благодарен. Посмотреть можно тут |
|
Часовой пояс GMT +3, время: 06:13. |