Курилка.co.ua
Orphus RSS kurilka.co.ua

Category

Archives

Дети мои … JavaScript

Author wmas wmas | Category Category CSS, JavaScript

С учетом того, что каждый браузер как хочет так и … выпендривается, что-то гарантировать не приходится. Потому все эти CSS и JavaScript это имхо извечный геморрой верстальщиков. Недавно пришлось решать такую задачу: присвоить CSS класс к ряду тегов LI в UL с id=»menu». Кому интересно тот, надеюсь, поймет. Но на всякий случай покажу это все в виде HTML-кода:

<ul id="menu">
<li>menu 1</li>
<li>menu 2</li>
…
<li>menu N</li>
<ul>

Так вот, для каждого тега LI нужно было присвоить CSS класс inact. Сделал я это через JavaScript. Насколько получилось эффективно и правильно, судите сами, буду благодарен за более простые, альтернативные варианты. И так:

<script>
function change(id_name) {
  ch_li = document.getElementById(id_name).childNodes;
  for (i=0; i<ch_li.length; i++) ch_li.item(i).className = 'inact';
  …
}
</script>

Основная фишка здесь childNodes, которая работала, по крайней мере, в IE7 и FireFox 2.0.0.9, с children, в FireFox не покатило. Говорят, что и childNodes не везде можно применить, но с тегом LI вроде работает.

Где это можно использовать? Я это делал для меню, когда при клике (без перезагрузки страницы) надо подсветить какой-то пункт, а остальные должны погаснуть. Ясное дело, для подсветки определенного пункта нужна еще доработка. Чтобы не мучиться с id и т.п. в функцию добавил еще одну переменную, которой будет присвоен объект this ссылки в меню, т.е.:

<li><a href=# onclick=change('menu', this)>menu1</a></li>

Сам же код JavaScript функции примет вид:

<script>
function change(id_name, obj) {
  ch_li = document.getElementById(id_name).childNodes;
  for (i=0; i<ch_li.length; i++) ch_li.item(i).className = 'inact';
  obj.className = 'act';
}
</script>

Думаю, что все достаточно просто и понятно. Если есть вопросы — пишите, постараюсь ответить. Спасибо за внимание ;)

Publish: Воскресенье Ноя 18, 2007

4 Responses for "Дети мои … JavaScript"

feed for comments on this post

  • Комментарий #548 author: bookworm Reply
    publish: Понедельник Ноя 19, 2007 at 2:25 дп

    Хм… а почему не воспользовались средствами CSS:

    #menu li {}

    Может я не углядел причины?

  • Комментарий #547 author: lunux Reply
    publish: Понедельник Ноя 19, 2007 at 11:41 дп

    2bookworm: это тоже можно если бы говорилось о событии hover, т.е. наведении мыши на ссылку. Здесь же я рассматриваю случай с кликом. Есть конечно visit, но это не решает имхо проблему. Хотя я могу и ошибаться.

  • Комментарий #549 author: bookworm Reply
    publish: Вторник Ноя 20, 2007 at 2:54 дп

    Хм… я наверное просто не понял, для чего вообще яваскриптом присваивать класс..

  • Комментарий #550 author: lunux Reply
    publish: Вторник Ноя 20, 2007 at 12:19 пп

    2bookworm только CSS класс :) таким образом я контролирую оформление пункта меню. По сути все сводится к ситуации когда надо создать что-то как на Яндекс.ру с новостями вверху. Там закладки есть «все» и «город», вот что-то в этом роде. По сути ситуаций можно придумать много. Я сейчас привел только ту которую решал >_<


Popular links

Copyright © since 2006 Курилка.co.ua,
powered by WordPress