Как со страницы перейти к указанному табу бутстрап?

Question

[L1nw0od]

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

Использую табы бутстрап.

Answer 1

[Павел]

$(document).ready(function() {        
// Читаем url страницы
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
    $('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
} 
// Делаем таб активным
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});        
});

Comments

[L1nw0od]

Я уже видел кусок этого кода, но он не работает у меня почему - то (

[Павел]

L1nw0od, учитесь пользоваться console.log
В данном случае проверяете что у Вас в хэше
console.log(hash);
Проверяйте также классы табов, ссылки

[L1nw0od]

Павел, Это очень долго и это я изучаю в процессе. Но тот код который вы скинули без обьяснения и примера ну прям лучше бы не кидали

[Павел]

L1nw0od, Вам на фриланс, раз не хотите разбираться, а хотите готовое решение, тут не экстрасенты чтобы видеть что у Вас там с кодом и почему не работает.

[L1nw0od]

Павел, так вы просто кусок кинули вырваный!
даже не показали как правильно это в тег а написать

[L1nw0od]

вот пример табов на главной странице

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#panel1">Панель 1</a></li>
  <li><a data-toggle="tab" href="#panel2">Панель 2</a></li>
  <li class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
      Другие панели 
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a data-toggle="tab" href="#panel3">Панель 3</a></li>
      <li><a data-toggle="tab" href="#panel4">Панель 4</a></li>
    </ul>
  </li>
</ul>
 
<div class="tab-content">
  <div id="panel1" class="tab-pane fade in active">
    <h3>Панель 1</h3>
    <p>Содержимое 1 панели...</p>
  </div>
  <div id="panel2" class="tab-pane fade">
    <h3>Панель 2</h3>
    <p>Содержимое 2 панели...</p>
  </div>
  <div id="panel3" class="tab-pane fade">
    <h3>Панель 3</h3>
    <p>Содержимое 3 панели...</p>
  </div>
  <div id="panel4" class="tab-pane fade">
    <h3>Панель 4</h3>
    <p>Содержимое 4 панели...</p>
  </div>
</div>

А вот ссылка на другой странице
<a href="https://site.com/#panel4">Go</a>

Как со второй страницы попасть на первую чтоб был открыт 4тый таб

Answer 2

[Владимир Проскурин]

Вообще, есть селектор :target, который срабатывает у элемента, у которого атрибут id равен текущему хешу с урла. Можете попробовать применить.

Comments

[L1nw0od]

Другого решения нету ( ??
заманался ужас просто (( вот мои табы
и вот ссылка при клике с другой страницы должен попадать в панель 2
<a href="https://site.com/#panel2">Go</a>

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#panel1">Панель 1</a></li>
  <li><a data-toggle="tab" href="#panel2">Панель 2</a></li>
  <li class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
      Другие панели 
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a data-toggle="tab" href="#panel3">Панель 3</a></li>
      <li><a data-toggle="tab" href="#panel4">Панель 4</a></li>
    </ul>
  </li>
</ul>
 
<div class="tab-content">
  <div id="panel1" class="tab-pane fade in active">
    <h3>Панель 1</h3>
    <p>Содержимое 1 панели...</p>
  </div>
  <div id="panel2" class="tab-pane fade">
    <h3>Панель 2</h3>
    <p>Содержимое 2 панели...</p>
  </div>
  <div id="panel3" class="tab-pane fade">
    <h3>Панель 3</h3>
    <p>Содержимое 3 панели...</p>
  </div>
  <div id="panel4" class="tab-pane fade">
    <h3>Панель 4</h3>
    <p>Содержимое 4 панели...</p>
  </div>
</div>

[Владимир Проскурин]

L1nw0od, я не знаю api у bootstrap, а читать доки нет желания (как и у вас разобраться с кодом из ответа выше, или с ссылкой, что я кинул).
Используйте костыль

<script type="text/javascript">
$(function() {
    if (document.location.hash) {
        $(document.location.hash).click();
    }
});
</script>

вставляйте где угодно, после jQuery.

[L1nw0od]

Владимир Проскурин, Окей хорошо, подскажите как у меня должен быть тег а написан быть чтоб оно переходило именно к той панели ?
<a href="https://site.com/#panel2">Go</a>

[Владимир Проскурин]

L1nw0od, таким и должен быть.

[L1nw0od]

Владимир Проскурин, Не срабатывет открытие таба (