Отмена перехода к якорю при клику

[sigma77]

Всем привет

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

Любой блок должен быть доступен по ссылке. Т.е. чтобы было можно сразу перейти к содержимому нужного блока или добавить его в закладки.

Т.е. в общем виде всё имеет следующую структуру:

<ul>
  <li><a href="#block1">Link 1</a></li>
  <li><a href="#block2">Link 2</a></li>
  <li><a href="#block3">Link 3</a></li>
  <li><a href="#block4">Link 4</a></li>
</ul>
<div>
  <div id="block1">Content 1</div>
  <div id="block2">Content 2</div>
  <div id="block3">Content 3</div>
  <div id="block4">Content 4</div>
</div>

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

Как можно отменить это событие?

Код JS.

function switchContentTabs() {
	var currentPath = window.location.hash;
	var contentId = currentPath.substring(1);
	var contentDiv = document.getElementById(contentId);

	if (contentId) {
		$('.content_nav li').removeClass('content_tab_active');
		$('.content_nav li a[href=' + currentPath +']').parents('li').addClass('content_tab_active');
		$('.content_inner').css({'display':'none'});
		contentDiv.style.display = 'block';
	}
	else {
		$('.content_inner').css({'display':'none'});
		document.getElementById('forms').style.display = 'block';
	}
}
switchContentTabs();

$('.content_nav li').click(function() {
	$('.content_nav li').removeClass('content_tab_active');
	$(this).addClass('content_tab_active');
	var currentPath = $(this).children('a').attr('href');
	var contentId = currentPath.substring(1);
	var contentDiv = document.getElementById(contentId);
	$('.content_inner').css({'display':'none'});
});

[Great Rash]

return false при клике?

[sigma77]

return false при клике?

Нет, тогда оно в принципе отменяет переход по ссылке. Т.е. в адресной строке ссылка не отображается.

Тоже самое preventDefault()

Как я понимаю, надо как-то выцепить событие, которое идет уже после клика.

[s0rr0w]

Всем привет

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

Любой блок должен быть доступен по ссылке. Т.е. чтобы было можно сразу перейти к содержимому нужного блока или добавить его в закладки.

Т.е. в общем виде всё имеет следующую структуру:

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

Как можно отменить это событие?

Ха, return false делать нужно. Логика должна быть следующая. При загрузке страницы анализируем текущий document.location. Если находим там #, то раскладываем строку, узнаем, какой именно контент надо подгрузить и грузим.

Пример можно посмотреть тут

[sigma77]

s0rr0w,

Спасибо. Попробую

[sigma77]

Вот, наконец-то нашла время вернуться к этой теме

В итоге вариант s0rr0w, не совсем подошел — при переходе по табам, адресная строка не менялась. Решила сделать по-другому.

Решение: http://jsfiddle.net/2XKs5/2/

Немного лень, конечно, было всё переделывать на чистый JS, но необходимости в этом особенной не было

Вечером выложу у себя и дам ссылку на нормальную страницу.

[wildhind]

Теме, конечно, уже год, но проблема до сих пор для многих актуальна.

Есть ещё одно решение: использовать не id, а data-атрибуты.

Я делаю так: два списка. Один — заголовки табов, другой — соответствующие блоки содержимого.

Элементам li обоих списков даём одинаковые data-атрибуты, и уже по ним обращаемся скриптом. Например:

<ul class="tab_headers">
<li data-tab="supercontent" class="active">суперконтент</li>
<li data-tab="megacontent">мегаконтент</li>
<li data-tab="someelse">что-то ещё</li>
</ul>
<ul class="tab_data">
<li data-tab="supercontent" class="active">содержимое суперконтента</li>
<li data-tab="megacontent">содержимое мегаконтента</li>
<li data-tab="someelse">ну и что-то ещё, как же без этого</li>
</ul>
——————-
$(function(){
	$(".tab_headers li").on("click",function(){
		$(this).addClass("active").siblings().removeClass("active");
		$('.tab_data li[data-tab=' + $(this).data("tab") + ']').addClass("active").siblings().removeClass("active");
		window.location.hash = "#"+$(this).data("tab");
	})
	$('.tab_headers li[data-tab=' + window.location.hash.substring(1) + ']').click();
})
———-
.tab_data li { display: none; }
.tab_data li.active { display: block; }

Так и работает, и ничего не скачет.

А вы ещё не прочувствовали силу html5? Тогда мы идём к вам!

Edited January 21, 2012 by wildhind