О, Якоря!

chest · February 25, 2011

Если на странице есть якорь со свойством display:none и видимый

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

А еще тому, который видно - дисплей:ноне

Edited February 25, 2011 by chest

SelenIT · February 25, 2011

В новых спеках есть псевдокласс :target, с которым можно сделать подобное. Но старые (и не очень) IE в пролёте. Кроссбраузерно, видимо, только JS — менять элементу display и делать ему scrollIntoView()...

chest · March 6, 2011

подключил js:

 <script type="text/javascript"> 
$('#list_page1').css('display','block');
$('#list_page2').css('display','none');
$(document).ready(function(){
$('a[name="refchooser"]').click (function()
{
	$('#list_page1').css('display','none');
	$('#list_page2').css('display','none');
	$('#list_'+this.id).css('display','block');
 })
			});
</script>

но бок в том, что при таком варианты блоки выводиться и все такое, но при обновлении (напр. f5) выводиться самый первый блок, а не тот на котором был пользователь, что делать?

sigma77 · March 6, 2011

но бок в том, что при таком варианты блоки выводиться и все такое, но при обновлении (напр. f5) выводиться самый первый блок, а не тот на котором был пользователь, что делать?

Использовать document.location.hash. Получать якорную часть, и показывать нужный блок.

chest · March 6, 2011

можете уточнить в подробностях?

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

Edited March 6, 2011 by chest

sigma77 · March 6, 2011

можете уточнить в подробностях?
Тю))))вы же мне уже это советовали)))) я так и реализовал, но проблема в том: Как на странице с контентом организовать ссылку, чтобы переводила на этот Якорь и делала его видимым? А еще тому, который видно - дисплей:ноне

Ты реализовал переход к якорю по клику. Теперь тебе нужно реализовать переход при загрузке странцы. Т.е. по событию window.onload. По этому событию получаешь якорную часть #якорь. Удаляешь знак решетки (string.substring(1)), соответственно получаешь id нужного элемента. Задаешь ему display = 'block', соответственно у тебя браузер переходит к этому элементу. В принципе аналогично http://forum.htmlbook.ru/index.php?showtopic=24385 только у тебя href ссылки будет равен id блока.

Upd. В общем, в первый раз не очень внимательно прочитала. Задаете всем блокам, которые надо скрывать общий класс. При клики или перезагрузке задаете ему display = 'none'; следом нужному display = 'block'

chest · March 6, 2011

советовала это

думаю это вот поможет, попробую, отпишусь

еще раз спасибо! еще раз - добавьте кнопку "спасибо")

chest · March 6, 2011

Upd. В общем, в первый раз не очень внимательно прочитала. Задаете всем блокам, которые надо скрывать общий класс. При клики или перезагрузке задаете ему display = 'none'; следом нужному display = 'block'

Если можно, кодом

chest · March 10, 2011

есть такой скрипт :

<script language="JavaScript" type="text/JavaScript">function switchContentTabs() {
	var currentPath = window.location.hash;
	var contentId = currentPath.substring(1);
	contentId += '_block';
	var contentDiv = document.getElementById(contentId);

	if (contentId != '_block') {
		$('#nav li').removeClass('active');
		$('#nav li a[href=' + currentPath +']').parents('li').addClass('active');
		$('.content_inner').css({'display':'none'});
		contentDiv.style.display = 'block';
	}
		else {
			$('.content_inner').css({'display':'none'});
			document.getElementById('astronomy_block').style.display = 'block';
		}
	}

	switchContentTabs();

$('#nav li').click(function() {
	$('#nav li').removeClass('active');
	$(this).addClass('active');
	var currentPath = $(this).children('a').attr('href');
	var contentId = currentPath.substring(1);
	contentId += '_block';
	var contentDiv = document.getElementById(contentId);
	$('.content_inner').css({'display':'none'});
	contentDiv.style.display = 'block';
});
</script>

Как сделать, чтобы переключение происходило не через ссылку в <ul><li>.......</li></ul>, а через ссылку на этой странице в любом месте?

Clubberry · March 10, 2011

<script language="JavaScript" type="text/JavaScript">function switchContentTabs() {
	var currentPath = window.location.hash;
	var contentId = currentPath.substring(1);
	contentId += '_block';
	var contentDiv = document.getElementById(contentId);

	if (contentId != '_block') {
		$('a').removeClass('active');
		$('a[href=' + currentPath +']').parents('a').addClass('active');
		$('.content_inner').css({'display':'none'});
		contentDiv.style.display = 'block';
	}
		else {
			$('.content_inner').css({'display':'none'});
			document.getElementById('astronomy_block').style.display = 'block';
		}
	}

	switchContentTabs();

$('a').click(function() {
	$('a').removeClass('active');
	$(this).addClass('active');
	var currentPath = $(this).children('a').attr('href');
	var contentId = currentPath.substring(1);
	contentId += '_block';
	var contentDiv = document.getElementById(contentId);
	$('.content_inner').css({'display':'none'});
	contentDiv.style.display = 'block';
});
</script>

Я не уверен на 99%, но вдруг всё же если заменить просто #nav li, li на а в скрипте. :unsure:

chest · March 10, 2011

))) сча попробую)

Галяк(

sigma77 · March 10, 2011

Как сделать, чтобы переключение происходило не через ссылку в <ul><li>.......</li></ul>, а через ссылку на этой странице в любом месте?

скрипт :
Как сделать, чтобы переключение происходило не через ссылку в <ul><li>.......</li></ul>, а через ссылку на этой странице в любом месте?

Если я тебя правильно поняла тебе нужно что-то вроде этого

<script language="JavaScript" type="text/JavaScript">
function switchContentTabs() {
	var currentPath = window.location.hash;
	var contentId = currentPath.substring(1);
	var contentDiv = document.getElementById(contentId);

	if (contentId) {
		$('.content_inner').css({'display':'none'});
		contentDiv.style.display = 'block';
	}
}

$(a).click(function() { /* чтобы вибирались не все ссылки, нужным можно задать свой класс */
	var currentPath = $(this).attr('href');
	var contentId = currentPath.substring(1);
	var contentDiv = document.getElementById(contentId);
	$('.content_inner').css({'display':'none'});
	contentDiv.style.display = 'block';
});
</script>

Сама не проверяла, но должно работать. До дома доеду, там посмотрю.

chest · March 10, 2011

Сигма, спасибо за оперативность!! но твой скрипт не работает(

Veseloff · March 10, 2011

Я вот вообще не понимаю чего автор хочет. Может, ссылку на страницу? Там всяко виднее будет

chest · March 10, 2011

Хочу сделать сайт, задумка том, чтобы на одной странице были ссылки, а на второй информация. При чем, при нажатие на ссылку пользователя перенапрявляло именно на тот вопрос, который ему нужен, а остальные были бы скрыты+при прямом переходе на вторую страницу текст не отображался.. и чтобы можно было на странице с контентом делать ссылки, чтобы нужный вопрос становился видимым, а остальные нет

wanntuzz · March 10, 2011

Надо делать много страниц, по-другому нечего не получится.

Veseloff · March 10, 2011

Хочу сделать сайт, задумка том, чтобы на одной странице были ссылки, а на второй информация. При чем, при нажатие на ссылку пользователя перенапрявляло именно на тот вопрос, который ему нужен, а остальные были бы скрыты+при прямом переходе на вторую страницу текст не отображался.. и чтобы можно было на странице с контентом делать ссылки, чтобы нужный вопрос становился видимым, а остальные нет

Какой сумбур. Ожидал в конце увидеть: «я джва года хочу такой сайт». Дайте пример что ли... Ну а, если я понял правильно, то кто вам мешает получать яваскриптом содержимое «якорной ссылки», прятать всё ненужное и показывать только нужное?

Надо делать много страниц, по-другому нечего не получится.

Не надо врать, всё получится

chest · March 10, 2011

мешают мои скудные познания яваскрипта... Сигма предложила такой скрипт:

<script>
  function answers() {
	var currentPath = window.location.hash; // получаем якорную часть ссылки
	contentId = currentPath.substring(1); // отсекаем знак решетки, получаем id нужного блока
	contentDiv = document.getElementById(contentId); // ищем блок с заданным id

	if (contentDiv) {
	  contentDiv.style.display = 'block'; // если есть такой блок, показываем его
	}
  }

  window.onload = answers;
</script>

И все отлично, но нельзя создавать ссылки на странице с контентом...

я пробовал вот такой еще:

<script type="text/javascript"> 
$('#list_page1').css('display','block');
$('#list_page2').css('display','none');
$(document).ready(function(){
$('a[name="refchooser"]').click (function()
{
	$('#list_page1').css('display','none');
	$('#list_page2').css('display','none');
	$('#list_'+this.id).css('display','block');
})
			});
</script>

но бок в том, что при таком варианты блоки выводиться и все такое, но при обновлении (напр. f5) выводиться самый первый блок, а не тот на котором был пользователь...

пробовал даже оба скрипта одновременно - тогда гуд)))) но только, если переход был по второму, то не меняет адресс страницы( может их можно как-то объединить нормально?

Я себе так понял, что мне подойдет скрипт, описанный в 9 сообщении, но нужно его изменить, чтобы переключение происходило не через ссылку в <ul><li>.......</li></ul>, а через ссылку на этой странице в любом месте?

Edited March 10, 2011 by chest

sigma77 · March 10, 2011

Сигма, спасибо за оперативность!! но твой скрипт не работает(

Ну а подумать немного :unsure: Конечно не работает, опечатка там была

http://jsfiddle.net/sBAvR/1/

chest · March 10, 2011

я все проверю позже, но если работает - заццццццелую!!!!!

chest · March 10, 2011

РАБОТАЕТ!!!! МОЯ ТЫ УМНИЧКА!!! Я знал, что именно ты мне поможешь!!!!

п.с. Обожаю умных женщин! так держать!

chest · March 11, 2011

Сигма, засада!!!!! В Internet Explorer'e скрипт не пашет( я имею ввиду что адрес в строке обновляет, а контент нет(

Edited March 11, 2011 by chest

sigma77 · March 11, 2011

Сигма, засада!!!!! В Internet Explorer'e скрипт не пашет( я имею ввиду что адрес в строке обновляет, а контент нет(

Исправь window.onload = switchContentTabs(); на window.onload = switchContentTabs;

chest · March 11, 2011

Спасибо еще раз :* извини, что в личку пишу, просто у меня паника была)

chest · March 16, 2011

Так, а что на счет индексации, нормально ли будет она происходить поисковыми ботами в случае использование Скрытых блоков? и как будет выглядеть проиндексированая страница?

sigma77 · March 16, 2011

Так, а что на счет индексации, нормально ли будет она происходить поисковыми ботами в случае использование Скрытых блоков? и как будет выглядеть проиндексированая страница?

Честно говоря не в курсе. По идее боты читают html, а в коде все тексты присутствуют.

Sign In

О, Якоря!

Question

Link to comment

Share on other sites

28 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information