on href

Luca · 13-08-10 19:24:20

Есть простенький код, который разворачивает элемент при клике на него

<li><a href="#1" onclick="toggle_visibility('1');">- Куда я попал?</a></li>
<div id="1" style="display:none"><p>Вы попали на наш сайт</p></div>

Мне необходимо сделать обработку не только по onclick но и по простой ссылке, т.е. я даю ссылку
/#1
на элемент и он разворачивается. Как это сделать? Сейчас при переходе на ссылку элемент не раскрывается.

Tiphon · 13-08-10 19:31:53

Для таких вещей удобно использоввать
docs.jquery.com/Tutorials

Mike22 · 13-08-10 20:28:51

Luca:
Т.е. чтобы раскрывалось от внешней ссылки?
Если да, то довольно простой JS в конце документа:
<SCRIPT>
var s = document.location + "";
var a = s.split("#");
if (a.length > 1) toggle_visibility(a[1]);
</SCRIPT>

Luca · 13-08-10 20:33:54

Mike22,
Что-то не работает.
Вот посмотри сам JS код вместе с твоей вствкой:

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
    
    var s = document.location + "";
    var a = s.split("#");
    if (a.length > 1) toggle_visibility(a[1]);
//-->
</script>

Mike22 · 13-08-10 21:11:49

Luca:

А где готовую страницу посмотреть с этим кодом и соответствующей ссылкой для проверки?
Этот <script> точно в самом низу документа?

Добавлено спустя 05 мин 40 с:
Вот я сделал себе страницу для примера:
aa.html
<div id='1' style='display: none'>TEST</DIV>

file:///D:/aa.html#1 - надпись TEST видна, иначе - нет.

Или что-то другое имелось в виду?

Luca · 13-08-10 21:21:52

Вот stoplinux.org.ru/uploads/files/faq.html#1

Mike22 · 13-08-10 21:23:00

Luca:

Ээ...
var s = document.location + "";
var a = s.split("#");
if (a.length > 1) toggle_visibility(a[1]);

должно быть не в теле функции, а за ним:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';

var s = document.location + "";
var a = s.split("#");
if (a.length > 1) toggle_visibility(a[1]);
}

заменить на:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';

}

var s = document.location + "";
var a = s.split("#");
if (a.length > 1) toggle_visibility(a[1]);

Отредактировано Mike22 (13-08-10 21:25:29)

Luca · 13-08-10 21:31:18

Mike22,
Все спасибо разобрался! С вносом в тело функции сам ошибся т.к. проверял и так и сяк.

Добавлено спустя 35 мин 13 с:
Все новый FAQ по сайту залит. Единственное хотелось бы узнать, как сделать чтобы при открытии элемента на него не перебрасывало т.е. он просто бы открывался без сдвига к верхней части окна браузера?

Добавлено спустя 38 мин:
Причем в FireFox перебрасывает и при закрытии и при открытии свернутого элемента, в Opera только при его закрытии.

Tiphon · 13-08-10 22:10:06

Ну в jquery это preventdefaults(), но вы вроде без нее...

Добавлено спустя 07 мин 17 с:
Как-то совсем с этими перескоками невозможно там читать.
Я понимаю, что с джейквери у вас уже не сложилось, но посмотрите, как это делается в одну строчку...

Автоматическая открывалка-закрывался (с примерами)
api.jquery.com/slideToggle/
Далее, в джейквери .next() возвращает следующего соседа. Значит если у вас есть такие конструкции:

<a class="faqlink" ... >вопрос</a><div style="display:none">ответ</div>

(обратите внимание, класс у ссылки: faqlink), то скрипт для открытия и закрытия ответов (которые сами по себе display:none) будет выглядеть так:

$(".faqlink").click(function{ $(this).next().slideToggle();})

Это прописывается в onDocumentLoad один раз где-нибудь в хедере. Для всех ссылок вопрос и всех следующих за ними ответов это будет действовать.
Вся цена вопроса)

Ну и еще можно сказать, что при необходимости туда можно впаять библиотеку работы с куки, чтобы оно запоминало, что открыто, а что закрыто. Это еще одна строчка кода. Но еще один инклюд .js

Отредактировано Tiphon (14-08-10 13:50:19)

Luca · 20-08-10 17:16:09

Tiphon, окей обязательно посмотрю, но позже. Хотя если не сложно, не мог бы сделать готовый вариант?

Tiphon · 20-08-10 18:30:53

Выложил к знакомой на сайт.

alelya.ru/FAQ.aspx

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

Luca · 21-08-10 05:56:43

большое спасибо, днем постараюсь глянуть!

Mike22 · 21-08-10 08:28:41

Luca:

На

или, как вариант

<a onclick="toggle_visibility('16');">, но тогда перестанут работать стили для ссылок.

или как еще вариант, таки поставить ссылку на позицию самого элемента:
<a href="#16" onclick="toggle_visibility('16');">

Отредактировано Mike22 (21-08-10 08:32:36)

Luca · 21-08-10 14:21:11

Tiphon,
Почему-то ссылки на элемент FAQ не разворачиваются
типа: stoplinux.org.ru/project/site-FAQ.html#6

И еще после после захода на страницу FAQ на сайте не возможно на любую другую страницу перейти.

Tiphon · 21-08-10 14:30:52

Luca пишет:

И еще после после хахода на страницу FAQ на сайте походу Java скрипты перестают вообще работать. Во всяком случае я с этой страницы даже перейти на другую не могу.

Oy prostite, vse delo v
$("a").click(function (event) { event.preventDefault(); });
otkluchaet VSE ssylky.

nado zamenit na
$("a.faqlink").click(function (event) { event.preventDefault(); });
chtoby otkluchit deystvie ssylok classa faqlink

Mike22 · 21-08-10 14:33:06

*тихо балдеет от того, что сперва в ссылку за каким-то органом ставят href="#", а потом с ним героически сражаются с помощью jquerry*

Tiphon · 21-08-10 14:44:54

Mike22 пишет:

тихо балдеет от того, что сперва в ссылку за каким-то органом ставят href="#", а потом с ним героически сражаются с помощью jquerry

A potomu, chto raznye brauzery otnosyatsya k ssylkam po-raznomu daje esli ne stavit #, Nu i validaciya, poetomu preventDefault is better to use)) Skajite spasibo IE v tom chisle. I polsovatelyam ne perehodyashim na novye brauzery.

P.S. I slovo "героически сражаются" slishkom krasochno;
P.S.S. pishu translitom ibo gluki s kxkb v linux, ruki ih ispravit eshe ne doshli

Mike22 · 21-08-10 15:04:19

Tiphon:

<A href="javascript:function()"> работает даже на IE 5.0, ибо классическое решение.

Tiphon · 21-08-10 15:13:41

Mike22 пишет:

<A href="javascript:function()"> работает даже на IE 5.0, ибо классическое решение.

nu ili javascript:void(0).
Ya tebe chestno skaju, chto ploho pomnu v chem tam delo bylo, ya uje goda 3 webom ne zanimalsya. Toli kakoy-nibud dikiy safari eto ne priemlil, toli full validaciu xhtml ono ne prohodilo. Ne pomnu=))) A jquery rabotaet vepde i ne zastavlyaet trahat mozg=)

Ya, kstati ne nastaivau na preventDefault

Plutonium · 21-08-10 20:56:06

Mike22 пишет:

<A href="javascript:function()"> работает даже на IE 5.0, ибо классическое решение.

это не классическое решение, а самое верное, потому как если не добавлять псевдопротокол "javascript" страница будет убегать вверх. cool

Mike22 · 21-08-10 22:23:14

Plutonium:

Есть и другие решения. Вот Tiphon предложил preventDefault(), как аналог preventDefault можно использовать return false:
<A href="#" onclick="function(); return false">

Можно отказаться от href, но тогда стили придется добавить в события.

Можно указать позицию текущего элемента, тогда документ будет прыгать к нему же, что тоже приемлемо.

Отредактировано Mike22 (21-08-10 22:23:59)

Tiphon · 21-08-10 23:05:58

Беда только в том, что разные браузеры имеют разные взгляды на джава скрипт. А пользователи - имеют старые браузеры. Поэтому я, например, очень высоко оценил магию джей-квери и то, что работая с ней можно быстро делать высоко-интерактивные страницы (и эффекты, и анимация, и аджакс с разновидностями) не задумываясь о том, чтобы это работало с основными браузерами (тк.к. оно работает).
Вот я работал с вебом несколько лет назад. И все варианты вроде onMouseOver="this.style='..., подзабылись на столько, что я, смотря на них, не могу сказать, что они будут работать на всех браузерах, пока не напишу и не проверю на всех браузерах (т.е. потрачу время). А когда на каком-то браузере что-то работать не будет, то я еще слажу и потрахаюсь с ним)) (т.е. еще потрачу много времени)

А используя JQuery, я уверен и могу не тратить это время) И при этом очень просто получать офигенный результат) (Даже через несколько лет, когда в голове подробностей уже нет, а остались только концепции. )
Есть и минусы, но в случае в ФАКУ - их нет)

Mike22 · 21-08-10 23:32:41

Tiphon:

Минус только один - огромное число быдлокодеров, которые тянут полный jQuerry по поводу и без. А он, например, на моей машине открывается 0.7 секунды даже из кеша. Тут jquerry_min, 0.05 секунды, в целом приемлемо.

Tiphon · 21-08-10 23:45:14

Mike22 пишет:

Минус только один

Угу, минус в быстродействии. Но в данном случае не сказывается)

А быдлокодеров всегда много, когда есть что-то более удобное)) Взять, например, питон)
Более удобное очень часто удобно, но медленно. Поэтому у быдлокодеров особенные проблемы с оптимизацией (остальное-то продумано за них)) .

Форум StopLinux

Объявление

#1 13-08-10 19:24:20

on href

#2 13-08-10 19:31:53

Re: on href

#3 13-08-10 20:28:51

Re: on href

#4 13-08-10 20:33:54

Re: on href

#5 13-08-10 21:11:49

Re: on href

#6 13-08-10 21:21:52

Re: on href

#7 13-08-10 21:23:00

Re: on href

#8 13-08-10 21:31:18

Re: on href

#9 13-08-10 22:10:06

Re: on href

#10 20-08-10 17:16:09

Re: on href

#11 20-08-10 18:30:53

Re: on href

#12 21-08-10 05:56:43

Re: on href

#13 21-08-10 08:28:41

Re: on href

#14 21-08-10 14:21:11

Re: on href

#15 21-08-10 14:30:52

Re: on href

#16 21-08-10 14:33:06

Re: on href

#17 21-08-10 14:44:54

Re: on href

#18 21-08-10 15:04:19

Re: on href

#19 21-08-10 15:13:41

Re: on href

#20 21-08-10 20:56:06

Re: on href

#21 21-08-10 22:23:14

Re: on href

#22 21-08-10 23:05:58

Re: on href

#23 21-08-10 23:32:41

Re: on href

#24 21-08-10 23:45:14

Re: on href

Подвал форума