Выделить активный пункт меню

@OrionIX · Регистрация: 19.12.2012

Студворк — интернет-сервис помощи студентам

Доброго дня.

Дано:
- 3 кнопки меню "1","2","3" (оранжевого цвета, тег <a> снаружи кнопки, т.е. срабатывает по всей кнопке)
- Поле "4" IFRAME с некоторыеми загружаемыми страницами при нажатии кнопок 1,2,3

Необходим принцип работы как на этом флэш: http://scr.templatemonster.com/36300/36381.swf

Тоесть:
1) При наведении на кнопки: они должны становится красными.
2) При нажатии на кнопку: она должна становится красной. При этом остальные кнопки должны быть оранжевые (если была какая-то кнопка выделена ранее).
3) При нажатии в области "4" активная красная кнопка должна оставатся активной (т.е. красной).

Вырезки из того что я пытался сделать:

HTML5
1
2
3
4
5
6
7
8
9
10
.LNK {background-color: #EAA116; cursor: hand;}
.LNKon {background-color: red; cursor: hand;}
.LNKccc {background-color: red; cursor: hand;}
 
<tr><td height="42" class=LNK
 onMouseOver="this.className='LNKon'" onMouseOut="this.className='LNK'" onClick="this.className='LNKccc'">
<a href="Links/HP-L-SAIT.html" target="HP_Right">
<div class=TXT>
    Меню 1
</div></a></td></tr>

@kalabuni · 20.12.2012, 12:58

у вас прям как место хранения иголки с кащеевой смертью - ячейка, в ней ссылка, а в ней div...
а там заяц, а в зайце утка, а в ней яйцо...

зачем всё это нагромождение тегов?
достаточно одной ячейки, на которую "навешиваете" всё, что вам надо - и изменение её собственных правил стиля при наведении/отведении курсора мыши, и клик

кроме того:
1) значение hand для курсора - оно некроссбраузерное, используйте pointer
2) нужна глобальная переменная, коя будет помнить последнюю нажатую кнопку меню
3) третий класс для ячеек меню не нужен, достаточно двух
4) вашему ифрейму дайте не name, а id="HP_Right"

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
var Actv = null;
</script>
<style>
tr.mnu td {padding: 10px; border: 5px solid blue}
td.out {background-color: #EAA116} /* а здесь правило для курсора - оно излишне */
td.over_and_clck {background-color: red; cursor: pointer}
</style>
<table cellspacing="5" cellpadding="0">
<tr class="mnu">
<td class="out"
    onmouseover="this.className = 'over_and_clck'"
    onmouseout="if (Actv != this) this.className = 'out'"
    onclick="if (Actv) Actv.className = 'out'; Actv = this; document.getElementById ('HP_Right').src = 'https://www.cyberforum.ru/html/thread738228.html'">Âàøà òåìà</td>
<td class="out"
    onmouseover="this.className = 'over_and_clck'"
    onmouseout="if (Actv != this) this.className = 'out'"
    onclick="if (Actv) Actv.className = 'out'; Actv = this; document.getElementById ('HP_Right').src = 'https://www.cyberforum.ru/html/'">Âû å¸ ñîçäàëè â ôîðóìå HTML</td>
<td class="out"
    onmouseover="this.className = 'over_and_clck'"
    onmouseout="if (Actv != this) this.className = 'out'"
    onclick="if (Actv) Actv.className = 'out'; Actv = this; document.getElementById ('HP_Right').src = 'https://www.cyberforum.ru/javascript/'">À íàäî áûëî íàïèñàòü â ôîðóì Javascript</td>
</tr>
<tr>
<td colspan="3"><iframe id="HP_Right" style="width: 100%; height: 400px"></iframe></td></tr>
</table>

@OrionIX · 20.12.2012, 19:10 **[ТС]**

Спасибо, по принципу работы - именно то что нужно.

Теперь возникает вопрос...
У меня на странице будет 8-10 пунктов меню. Можно ли onmouseover, onmouseout и onclick прописать в общие стили, чтоб в <td> вставлять однотипные рукописи по-меньше?

Еще может подскажите, где можно почитать про работу тегов типа "ХХХ.УУУ" (this.className / document.УУУ и т.п.)
И чем отличалось бы, если написать в стилях ".out" вместо "td.out"?

ps: сообщение оставлял в похожей теме active +css, но его перенесли сюда.

@kalabuni · 20.12.2012, 19:51

в "общих стилях" указываются

CSS
1
селекторы {правила стилей для селекторов}

а onmouseover, onmouseout и onclick - это javascript-события, но не селекторы и не правила стилей для них

для уменьшения писанины можно сделать, например, так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<style>
#mnu td {padding: 10px; border: 5px solid blue}
.out {background-color: #EAA116}
.over_and_clck {background-color: red; cursor: pointer}
#HP_Right {width: 100%; height: 400px}
</style>
 
<table cellspacing="5" cellpadding="0">
<tr id="mnu">
<td lang="https://www.cyberforum.ru/html/thread738228.html">Âàøà òåìà</td>
<td lang="https://www.cyberforum.ru/html/">Âû å¸ ñîçäàëè â ôîðóìå HTML</td>
<td lang="https://www.cyberforum.ru/javascript/">À íàäî áûëî íàïèñàòü â ôîðóì Javascript</td>
<td lang="https://www.cyberforum.ru/">È êòî-òî èç ìîäåðàòîðîâ âàøó òåìó ïåðåí¸ñ</td>
</tr>
<tr>
<td colspan="4"><iframe id="HP_Right"></iframe></td></tr>
</table>
<script>
var Actv = null;
(
   function ()
   {
   for (var tds = document.getElementById ('mnu').cells, j = 0, lj = tds.length; j < lj; j++)
      with (tds [j])
         className = 'out',
         onmouseover = function () {this.className = 'over_and_clck'},
         onmouseout = function () {if (Actv != this) this.className = 'out'},
         onclick = function () {if (Actv) Actv.className = 'out'; Actv = this;
                                document.getElementById ('HP_Right').src = this.lang}
   }
) ();
</script>

ответ на ваш вопрос - чем отличалось бы, если написать в стилях ".out" вместо "td.out"? - смотри внутри кода

насчёт - где можно почитать? - я бы и сам поинтересовался... не знаю вот... потому изучаю Javascript "методом тыка"

@OrionIX · 20.12.2012, 22:23 **[ТС]**

О, так лучше. Меню отдельно, функции реакции на мышь отдельно )

@OrionIX · 26.12.2012, 19:59 **[ТС]**

Ячейка с вертикальным меню выглядит так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<table id="mnu" width=340 height=546 cellSpacing=0 cellPadding=0 align=center border=0>
 
<tr><td height="58" lang="Links/HP-L-FIND.html">FIND</td></tr>   /* кнопка */
<tr><td height="3" bgcolor="#257173"></td></tr>           /* промежуточная строчка */
<tr><td height="58" lang="Links/HP-L-MAIL.html">MAIL</td></tr>   /* кнопка */
<tr><td height="3" bgcolor="#257173"></td></tr>
<tr><td height="58" lang="Links/HP-L-INTERNET.html">INTERNET</td></tr>   /* кнопка */
<tr><td height="3" bgcolor="#257173"></td></tr>
<tr><td height="58" lang="Links/HP-L-WEATHER.html">WEATHER</td></tr>   /* кнопка */
 
/* и т.д..... */
 
</table>

Но...
id="mnu" срабатывает для абсолютно всех строк, т.е. и для тех, где это ненужно.

Как сделать так, чтоб стиль наведения/отведения мыши работал только на кнопках меню, но для остальных промежуточных строчках действовал общий стиль (либо другой какой-то)?

@kalabuni · 26.12.2012, 20:41

замените и добавьте:
__________________
...
for (var tds = document.getElementById ('mnu').getElementsByTagName ('td'), j = 0, lj = tds.length; j < lj; j++)
with (tds [j]) if (lang)
...
__________________

@OrionIX · 26.12.2012, 20:57 **[ТС]**

Спасибо

Забыл сразу спросить...
Во фрейм добавил ссылку

HTML5
1
<IFRAME SRC="Links/HP-L-FIND.html" id="HP_Right"></IFRAME>

Т.е. в нем сразу загружается ссылка по первой кнопке меню.

А как в самом меню прописать, чтоб первое меню при запуске страницы сразу было "активным"?

@kalabuni · 27.12.2012, 09:53

весь скриптовой блок перепишите:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(
   function ()
   {
   for (var tds = document.getElementById ('mnu').getElementsByTagName ('td'), k = j = 0, lj = tds.length; j < lj; j++)
      {
      with (tds [j]) if (lang) 
         className = 'out',
         onmouseover = function () {this.className = 'over_and_clck'},
         onmouseout = function () {if (Actv != this) this.className = 'out'},
         onclick = function () {if (Actv) Actv.className = 'out'; Actv = this;
                                document.getElementById ('HP_Right').src = this.lang}
      if (!k) Actv = tds [j], tds [j].className = 'over_and_clck', k = 1;
      } 
   }
) ();

@OrionIX · 27.12.2012, 13:54 **[ТС]**

Как-то некоректно работает меню, если на него нажать 2й раз (секунды через 2 допустим) , пропадает выделение.
Можно ли это как-то поправить? Мелочь, но хотелось бы чтоб всё нормально было при любых действиях.

И другой вопрос. Можно ли сделать чтоб активный пункт меню после onmouseout становился 3м стилем (к примеру actv_out)?

@kalabuni · 27.12.2012, 14:29

PrinceSaint, а можно я подожду немного... недельку-полторы... покуда вы совсем-совсем всё не придумаете, чего вам надо?

Не по теме:

а то у нас с вами как в анекдоте: тетенька, дайте попить, а то так есть хочется, что аж переночевать негде

@OrionIX · 27.12.2012, 22:24 **[ТС]**

Мне это вообщем-то не горит.
Но и Вы поймите правильно. Скрипт вставить в свою страницу - минуты дела. Покрутить структуру (сетку) html тоже труда не составляет. И когда это все сделано - вырисовывается картинка страницы, тогда и появляются свои пожелания к работе меню или других частей страницы.

@kalabuni · 27.12.2012, 23:29

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style>
#mnu td        {padding: 0 10px}
#mnu td.out    {background-color: #EAA116; cursor: pointer}
#mnu td.over   {background-color: blue; cursor: pointer}
#mnu td.clck   {background-color: lime; cursor: default}
#mnu #HP_Right {width: 400px; height: 100%}
</style>
 
<table id="mnu" cellspacing="0" cellpadding="0">
<tr><td lang="https://www.cyberforum.ru/html/thread738228.html">Âàøà òåìà</td>
<td style="padding: 0" rowspan="7">
   <iframe id="HP_Right" src="https://www.cyberforum.ru/html/thread738228.html"></iframe></td></tr>
<tr><td style="height: 3px; font-size: 0; background-color: #257173">&nbsp;</td></tr> 
<tr><td lang="https://www.cyberforum.ru/html/">Âû å¸ ñîçäàëè â ôîðóìå HTML</td></tr> 
<tr><td style="height: 3px; font-size: 0; background-color: #257173">&nbsp;</td></tr> 
<tr><td lang="https://www.cyberforum.ru/javascript/">À íàäî áûëî íàïèñàòü â ôîðóì Javascript</td></tr> 
<tr><td style="height: 3px; font-size: 0; background-color: #257173">&nbsp;</td></tr> 
<tr><td lang="https://www.cyberforum.ru/">È êòî-òî èç ìîäåðàòîðîâ âàøó òåìó ïåðåí¸ñ</td></tr>
<tr>
</table>
 
<script>
(
   function ()
      {
      for (var tds = document.getElementById ('mnu').getElementsByTagName ('td'),
      k = j = 0, lj = tds.length; j < lj; j++) with (tds [j])
         {
         if (lang)
            className = 'out',
            onmouseover = function () {if (Actv != this) this.className = 'over'},
            onmouseout  = function () {if (Actv != this) this.className = 'out'},
            onclick     = function () {if (Actv != this) Actv.className = 'out',
            Actv = this, this.className = 'clck',
            document.getElementById ('HP_Right').src = this.lang}
         if (!k) Actv = tds [j], k = 1, Actv.className = 'clck';
         }
      }
) ();
</script>

@OrionIX · 28.12.2012, 01:37 **[ТС]**

Спасибо. Чуть разобрался и сделал что хотел получить в итоге.

HTML5
1
2
3
4
5
6
 
           onmouseover = function () {this.className = 'over'},
            onmouseout  = function () {if (Actv != this) {this.className = 'out'} 
                                                  else {this.className = 'clck'} },
            onclick     = function () {if (Actv != this) Actv.className = 'out', Actv = this,
                    document.getElementById ('HP_Right').src = this.lang}

@OrionIX · 14.10.2016, 12:01 **[ТС]**

Вопрос по той же теме.

Меню и рядом фрейм (немного переделал):

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="mnu">
<ul>
    <li class="actv"><a href="Links/111.html">11111111</a></li>
    <li><a href="Links/222.html">2222222</a></li>
    <li><a href="Links/333.html">33333333</a></li>
</ul>
</div>
 
<div class="frm-right">
    <iframe class="frm-right" src="Links/111.html" id="HP_Right" scrolling="no" frameborder="0" marginheight="0" marginwidth="0"></iframe>
</div>

Скрипт работы меню:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function () {
    $('#mnu > a').on('click', function(){
        $(this).removeAttr('href');
        var element = $(this).parent('li');
        if (element.hasClass('actv')) {}
        else {
            element.addClass('actv');
            element.siblings('li').removeClass('actv');
        }
    });
});

1) Не работает активация кнопки меню. Т.е. активация по клику и диактивация прошлой нажатой.
2) Помогите добавить в скрипт код, чтоб при нажатии изменялся фрейм рядом (то что было выше по теме)

JavaScript
1
document.getElementById ('HP_Right').src = this.lang

@OrionIX · 18.10.2016, 03:00 **[ТС]**

Вопрос последнего поста все еще в силе.
Помогите найти где ошибка.

@j2FunOnly · 18.10.2016, 10:17

Не по теме:

PrinceSaint, дождались бы пока четыре года пройдет :)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function () {
  // селектор `#mnu > a` ищет непосредственных `а` потомков элемента `#mnu`
  // либо `$('#mnu > ul > li > a')`, либо проще
  $('#mnu a').on('click', function(e){
    // убрать дествие ссылки по умолчанию на клик
    e.preventDefault();
    // таким образом после клика, ссылка перестанет работать
    // $(this).removeAttr('href');
    var element = $(this).parent('li');
    if (!element.hasClass('actv')) {
      element.addClass('actv');
      element.siblings('li').removeClass('actv');
    };
    // изменить свойтво `src` на значение `href`, текущего элемента
    $('#HP_Right').prop('src', this.href);
  });
});

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@OrionIX 11 / 11 / 2 Регистрация: 19.12.2012 Сообщений: 177
	20.12.2012, 19:10 [ТС]
	Спасибо, по принципу работы - именно то что нужно. Теперь возникает вопрос... У меня на странице будет 8-10 пунктов меню. Можно ли onmouseover, onmouseout и onclick прописать в общие стили, чтоб в <td> вставлять однотипные рукописи по-меньше? Еще может подскажите, где можно почитать про работу тегов типа "ХХХ.УУУ" (this.className / document.УУУ и т.п.) И чем отличалось бы, если написать в стилях ".out" вместо "td.out"? ps: сообщение оставлял в похожей теме active +css, но его перенесли сюда. 0

@OrionIX 11 / 11 / 2 Регистрация: 19.12.2012 Сообщений: 177
	20.12.2012, 22:23 [ТС]
	О, так лучше. Меню отдельно, функции реакции на мышь отдельно ) 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	26.12.2012, 20:41
	замените и добавьте: __________________ ... for (var tds = document.getElementById ('mnu').getElementsByTagName ('td'), j = 0, lj = tds.length; j < lj; j++) with (tds [j]) if (lang) ... __________________ 0

@OrionIX 11 / 11 / 2 Регистрация: 19.12.2012 Сообщений: 177
	27.12.2012, 13:54 [ТС]
	Как-то некоректно работает меню, если на него нажать 2й раз (секунды через 2 допустим) , пропадает выделение. Можно ли это как-то поправить? Мелочь, но хотелось бы чтоб всё нормально было при любых действиях. И другой вопрос. Можно ли сделать чтоб активный пункт меню после onmouseout становился 3м стилем (к примеру actv_out)? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	27.12.2012, 14:29
	PrinceSaint, а можно я подожду немного... недельку-полторы... покуда вы совсем-совсем всё не придумаете, чего вам надо? Не по теме: а то у нас с вами как в анекдоте: тетенька, дайте попить, а то так есть хочется, что аж переночевать негде 0

@OrionIX 11 / 11 / 2 Регистрация: 19.12.2012 Сообщений: 177
	27.12.2012, 22:24 [ТС]
	Мне это вообщем-то не горит. Но и Вы поймите правильно. Скрипт вставить в свою страницу - минуты дела. Покрутить структуру (сетку) html тоже труда не составляет. И когда это все сделано - вырисовывается картинка страницы, тогда и появляются свои пожелания к работе меню или других частей страницы. 0

@OrionIX 11 / 11 / 2 Регистрация: 19.12.2012 Сообщений: 177
	18.10.2016, 03:00 [ТС]
	Вопрос последнего поста все еще в силе. Помогите найти где ошибка. 0