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

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

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

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

то есть: у меня есть три вкладки, показывающие разные продукты, по умолчанию вкладка 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;
  });

});

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

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


javascript html jquery tabs
person Ricardo Zea    schedule 22.04.2010    source источник

Ответы (2)


arrow_upward
4
arrow_downward

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

 <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 );
});
person Phil.Wheeler    schedule 22.04.2010
comment
Странно, как ты ответил на то же самое через 5 минут после меня и получил все голоса :S - person Pablo Fernandez; 22.04.2010
comment
Я знаю, что ты чувствуешь, и прошу прощения за это. Но, честно говоря, я уже написал первый черновик, когда уведомление SO показало, что есть один новый ответ. я не занимался плагиатом; мы просто оба согласны с тем, что это один из верных способов ответить на вопрос. - person Phil.Wheeler; 22.04.2010
comment
Спасибо за информацию... однако я должен извиниться, я сделал ошибку в своем коде: вместо использования products.php у меня есть вкладки как #tab1, #tab2, #tab3 и т. д. Я исправил свой первый пост . Как мне включить пример кода, который вы упомянули, с кодом, который у меня есть в моем первом сообщении? Большое спасибо. - person Ricardo Zea; 22.04.2010
comment
Подожди. Используете ли вы вкладки пользовательского интерфейса jQuery или создали свои собственные? Я предположил, что вы используете пользовательский интерфейс jQuery. - person Phil.Wheeler; 23.04.2010
comment
Нет, я не использую вкладки пользовательского интерфейса jQuery, я нашел этот код где-то в Интернете, я не помню, где :( Вероятно, на этом этапе быстрее просто реализовать вкладки пользовательского интерфейса jQuery, верно? - person Ricardo Zea; 23.04.2010
comment
Что ж, я не хочу рассказывать вам, как создать ваше приложение, но в структуре пользовательского интерфейса уже есть много всего, что готово к работе. Это может сэкономить вам гораздо больше времени в долгосрочной перспективе. - person Phil.Wheeler; 23.04.2010
comment
Проанализировав свои вкладки, я решил не использовать вкладки и создать отдельные страницы для каждого контента. Причина: SEO-цели. Я дал вам положительный голос и выбрал ваш ответ в качестве принятого ответа, но я должен сказать, что, к сожалению, у меня не было возможности использовать ваш код. Большое спасибо за вашу помощь и ваше время, Фил. - person Ricardo Zea; 21.05.2010

arrow_upward
1
arrow_downward

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

<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>

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

Все, что вам нужно сделать, это изменить ваш скрипт, чтобы он ссылался на ' вместо ‹ a > и добавить 'cursor:pointer;' в свой CSS для диапазона ‹ >. Это работает во всех браузерах, включая IE6.

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

person Ricardo Zea    schedule 08.06.2010