При клике по названию таба, содержимое таба открывается, но весь блок подскакивает к верху вьюпорта, как исправить?

Question

[Happymalina]

Привет!! На сайте есть два блока которые сделаны через табы от бутстрапа. Первый блок работает нормально, а во втором при нажатии на заголовок таба, то есть на ссылку все переключается, но весь блок подбрасывается вверх вьюпорта, как будто там якорь. Думала что стандартный

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

решит проблему. Но не помогло. Вот ресурс - sovetandreevka.ru , прямо на главной вкладки с новостями, справа вывод постов. Подскажите пожалуйста, решение кажется очень простым, но может не очевидным для меня.

Comments

[romy4]

поучите js. даже объяснить трудно почему такое решение: prevent event

Answer 1

[romy4]

решение вроде бы есть, но исправлять его бесплатно как-то слишком впадло

Comments

[Happymalina]

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

[romy4]

Happymalina: нужно возвращать false из фукнции :)

[Kostya Gorozhanov]

romy4: и сколько же ты за это собирался взять?

[romy4]

Kostya Gorozhanov: пол царства

[Kostya Gorozhanov]

romy4: ну норм)

[romy4]

Kostya Gorozhanov: по-божески, я б сказал :)

Answer 2

[tigra]

всё просто, в конце функции напиши return false;

тогда сделайте например так.
id вашего блока вставляйте не в саму ссылку а в какой нибудь атрибут.

<a href="#" id-page="first-panel3" class="last-post-title">...text</a>

и при клике по какой либо ссылке, делайте активным блок новости с таким id, который указан в атрибуте у конкретной ссылки

$('.last-posts_list a').click(function () {
       var page = "#"+$(this).attr("id-page");
       $(page).addClass("active");
return false;
});

Comments

[Happymalina]

Олег, я правильно поняла, вот так должно быть?
$('#postsTabs-3 a').click(function (e) {
e.preventDefault()
$(this).tab('show')
return false;
})
почему то перестали кликаться заголовки..

[Happymalina]

Получилось вот так: <?php the_title(); ?> и в скрипт то что вы написали, тоже перестали реагировать на клики заголовки..

Answer 3

[coderisimo]

вывод постов (справа) вообще не реагирует на клики

Comments

[Happymalina]

да, это случилось только что, я добавила return false..

[Happymalina]

Сейчас работает во второй и третьей закладке

[coderisimo]

а вы когда вставили return false изменили ссылку ? перенесли first-panel3 в атрибут из href ?

[Happymalina]

coderisimo: Да, в атрибут перенесла, но по прежнему не реагирует на клик заголовок

[coderisimo]

что-то я запутался в вашем коде. ваши кликабельные ссылки имеют класс - last-post-title
, а вы используете селектор по ID "postsTabs-3" которого в них нет.

$('#postsTabs-3 a').click(function (e) {
e.preventDefault()
$(this).tab('show')
return false;
})

[Happymalina]

я отталкивалась от спецификации bootsrtapa, предполагала что если сделать как там будет работать, там обращаются к ссылке через id, и я понимаю это так(без особых знаний js), что по клику на сслыку, должен открыться блок с таким же id Правильно? ..Попробовала через класс, но тоже не срабатывает..

[coderisimo]

Happymalina: для начала , возможно надо добавить role="tab" вашим табам. тем что не работают, ведь у тех что работают этот атрибут имеется. ))

[coderisimo]

по аналогии с работающими табами вам нужно написать было написать что-то типа :
$('#postsTabs-1 a').click(function (e) {
e.preventDefault()
$(this).tab('show')

})

[Happymalina]

coderisimo: )) прошлась еще раз по коду, дописала все то что не хватало для a и li, но работает также.. при добавлении в скрипт этого правило перестает функционировать переключение..

[coderisimo]

Насколько я понимаю , если добавляете - data-toggle="tab" , то JS не нужен. т.е. табы создаются и работают без .....$('#postsTabs-1 a').click(function (e) . может , чтобы на запутаться еще больше вам стоит ОТДЕЛЬНО сделать простой таб прямо по мануалу, убедиться, что он работает, и постепенно добавлять нужное, отслеживая работоспособность. когда получите рабочий вариант - перенесете в рабочий проект.

[Happymalina]

Да, идея хорошая, попробую) тему не закрываю пока, спасибо вам большое за отзывчивость!!

[coderisimo]

Happymalina: главное разобраться, удачи