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

@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);
  });
});

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@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