jQuery: вкладки, с которыми можно связать вкладку / контент

Question

Моя проблема проста.

Я уже внедрил систему с вкладками, и я бы, вероятно, потратил больше времени на внедрение другой системы с нужным мне решением, чем попытка адаптировать код, который у меня есть, и узнать что-то, спрашивая:)

Моя проблема в том, что вкладки не могут быть связаны, мне нужно иметь возможность ссылаться на вкладку с другого сайта или страницы, и чтобы эта вкладка была выбрана при загрузке страницы.

т.е.: у меня есть три вкладки, показывающие разные продукты, по умолчанию вкладка 1 активна / выбрана при загрузке страницы. На главной странице я хочу указать ссылку на вкладку 2, но не могу указать ссылку на вкладку 2, поскольку она не выбрана. Не уверен, имеет ли это смысл.

Вкладка:

 <ul>
  <li><a href="#tab1">Product 1</a></li>
  <li><a href="#tab2">Product 2</a></li>
  <li><a href="#tab3">Product 3</a></li> 
 </ul>

 <div class="tab_container">
  <div id="tab1" class="tab_content">Product 1 info...</div>
  <div id="tab2" class="tab_content">Product 2 info...</div>
  <div id="tab3" class="tab_content">Product 3 info...</div>
 </div>

мой JQuery:

$(document).ready(function() {

//Default Action
$(".tab_content").hide(); 
$("ul.tabs li:first").addClass("active").show(); 
$(".tab_content:first").show(); 

//On Click Event
$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); 
    $(this).addClass("active"); 
    $(".tab_content").hide(); 
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn(); 
    return false;
  });

});

Есть ли способ, которым этот код может быть адаптирован для связи с любой вкладкой из любой точки мира и выбора этой вкладки при загрузке страницы?

Заранее спасибо.

Answer 1

Ваши вкладки будут более удобны в использовании, например:

 <ul>
  <li><a href="#tab1">Product 1</a></li>
  <li><a href="#tab2">Product 2</a></li>
  <li><a href="#tab3">Product 3</a></li> 
 </ul>

 <div class="tab_container">
  <div id="tab1" class="tab_content">Product 1 info...</div>
  <div id="tab2" class="tab_content">Product 2 info...</div>
  <div id="tab3" class="tab_content">Product 3 info...</div>
 </div>

Так что теперь вы можете искать хеш в URL браузера (например, использовать location.pathname для извлечения хэша URL ииспользуйте $ .tabs (). select ([id] или [index]) для установки вкладки).

Например

$(function(){
   $('tabs').tabs();
   var hash = location.hash;
   $('tabs').tabs( "select" , hash );
});

Answer 2

После того, как я столкнулся с этой проблемой несколько раз и поговорил с экспертом по SEO, я решил прекратить использовать элемент для вкладок, вместо этого я использую простые элементы , например:

<ul class="tabs">
  <li><span rel="tabs1" class="defaulttab">Tab 1</span></li>
  <li><span rel="tabs2">Tab 2</span></li>
  <li><span rel="tabs3">Tab 3</span></li>
</ul>

Использование '#' в элементах (фиктивные ссылки) не оптимизировано для SEO, использование элементов делает заголовки / вкладки частью содержимого страницы (оптимизировано для SEO), а функциональность остается неизменной .

Все, что вам нужно сделать, - это изменить ваш скрипт, чтобы ссылаться на него вместо , и добавить курсор: указатель; на ваш CSS для . Это работает во всех браузерах, включая IE6.

Еще одна хорошая особенность этого решения заключается в том, что если вкладки находятся внизу страницы, то при нажатии на вкладку страница не поднимется вверх, это большое улучшение удобства использования.