Обработка клика css

@seas71 · Регистрация: 12.11.2015

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

Друзья, добрый день. Задача такая - есть блок с произвольной информацией и нужно чтобы по клику информация в блоке менялась. Вот примерно так (приложение). Не пойму как правильно описать этот самый клик по блоку чтобы в блоке вывелась другая информация (информация по идее должна выводится из другого div). И как при такой разметке быть с позиционированием этих блоков. Пробовал так:

CSS
1
2
.item1:active  ~ .info1,
.item2:active  ~ .info1

при такой разметке

PHP/HTML
1
2
3
4
5
6
7
8
9
10
   <div class="item1" tabindex="0">
      <a href="#">информация1</a>  
    <div class="info1">
      <a href="#">информация2</a>  
    </div>
       <div class="item2" tabindex="1">
      <a href="#">информация3</a>  
    <div class="info2">
      <a href="#">информация4</a>  
    </div>

tabindex="х" определяет блоки для вывода а вышеуказанный стиль должен осуществлять переключение, как я понял. Но это не работает, в какую сторону копать, или есть другое решение, более рациональное? И как быть с позиционированием "item1" по идее relative а "info1" absolute и display:bloсk?

@call_me_Frank · 25.04.2016, 10:05

По сути задача - обыкновенный слайдер. используй связку с JavaScript.

"Атрибут tabindex определяет последовательность перехода между ссылками при нажатии на кнопку Tab." - это не то, что тебе нужно )

@seas71 · 25.04.2016, 11:20 **[ТС]**

Просто css не отделаться? Там ведь есть псевдоклассы active, hover. Т.е. есть варианты реализации меню на CSS используя псевдоклассы.

@call_me_Frank · 25.04.2016, 13:07

Думаю, что нет. Если ты хочешь упростить задачу, то, ограничиваясь только CSS, ты скорее всего усложнишь её )

"Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее."
Определяет стиль, ничего кроме.

Кое-что сделать можно, но функционал будет сильно ограничен. Например, тот же :active действует пока нажата кнопка мыши, при отпускании волшебство прекращается.

Вот пример меню, который смог составить я:

Файл test.html

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
<html>
 
<head>
    <link rel="stylesheet" type='text/css' href='test.css'>
</head>
 
<body>
 
 
<ul>
    <li id="link_1">box #1</li>
    <li id="link_2">box #2</li>
    <li id="link_3">box #3</li>
    <li id="link_4">box #4</li>
    
    <div id="menu_div">
        <div id="box_1">box #1</div>
        <div id="box_2">box #2</div>
        <div id="box_3">box #3</div>
        <div id="box_4">box #4</div>
    </div>
</ul>
 
</body>
 
</html>

Файл test.css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div#menu_div { border: 1px solid black; }
 
div#box_1 { display: none; }
div#box_2 { display: none; }
div#box_3 { display: none; }
div#box_4 { display: none; }
 
li#link_1:hover { color: red; font-weight: bold; }
li#link_1:active ~ div#menu_div > div#box_1 { display: block; }
 
li#link_2:hover { color: red; font-weight: bold; }
li#link_2:active ~ div#menu_div > div#box_2 { display: block; }
 
li#link_3:hover { color: red; font-weight: bold; }
li#link_3:active ~ div#menu_div > div#box_3 { display: block; }
 
li#link_4:hover { color: red; font-weight: bold; }
li#link_4:active ~ div#menu_div > div#box_4 { display: block; }

@seas71 · 10.05.2016, 15:50 **[ТС]**

Действительно криво получается без JS. Пробую реализовать с использованием JS. Вот что понаписал:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        <script>
        
        onload = function () {
        $('#item1').mouseover(function(){
        document.getElementById('item1').innerHTML='ИНФОРМАЦИЯ 2';
        })  // при наведении меняем информацию в блоке
        $('#item1').mouseout(function(){
        document.getElementById('item1').innerHTML='<a href="#"><span class="name">ИНФОРМАЦИЯ 1</span></a>  '; 
        })  //если мышь не на блоке - возвращаем информацию 1 в блок
        };
        
        </script>
 
        <div id="item1" >
            <a href="#">ИНФОРМАЦИЯ 1</a>  
        </div>

В результате информация в блоке при наведении меняется, но беда в том что если пытаюсь заключить информацию для подмена (информация 2) в тег <a> - перестает срабатывать .mouseout и отображается только первая ссылка в <a> (т.е. если несколько ссылок- отображается только первая). Что-то не так, помогите пожалуйста разобраться!

@vnmslf · 10.05.2016, 15:55

Попробуйте через js при наведении/клике/насморке/нашествии пчел у одного элемента ставить значение z-index (zIndex в js будет) в 1, а у другого в 2. При клике на другой блок - наоборот. Или менять через display: none/inline-block, или visibility: hidden/visible - в зависимости от того, что вам нужно. Или вообще toggleClass.

@seas71 · 10.05.2016, 16:21 **[ТС]**

Попробовал так- тоже самое:

JavaScript
1
2
3
4
5
6
7
8
9
    onload = function () {
        $('#item1').mouseover(function(){
        document.getElementById('item1').innerHTML='<div><a href="#">инф1</a></div>';
        $("#item1").css("z-index","1");
        })
        $('#item1').mouseout(function(){
        document.getElementById('item1').innerHTML='<a href="#">инф2</a>  ';
        $("#item1").css("z-index","2");
        })

@vnmslf · 10.05.2016, 16:23

Сообщение от seas71

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="item1" tabindex="0">
 <a href="#">информация1</a> 
 <div class="info1">
 <a href="#">информация2</a> 
 </div>
<div class="item2" tabindex="1">
 <a href="#">информация3</a> 
 <div class="info2">
 <a href="#">информация4</a> 
 </div>

А у вас вот эта же разметка осталась? Просто я тут не наблюдаю несколько </div>. Может в этом дело? Выложите весь код, давайте попробуем разобраться

@call_me_Frank · 10.05.2016, 16:30

По-разному можно сделать. Можно работать не с div-блоком, а напрямую с ссылкой:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    <script>
        onload = function () {
            
            $('#link1').mouseover(function(){
 
                $('#link1').attr('href', 'follow_new_link');
                $('#link1').html("New link");
            })
 
            $('#link1').mouseout(function(){
 
                $('#link1').attr('href', 'follow_old_link');
                $('#link1').html("Old link");
            })
        };
    </script>
 
    <div id="item1" >
        <a href="#" id="link1">Old link</a>  
    </div>

можно так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <script>
        onload = function () {
        };
 
        function over_me(obj) {
            //
 
            $('#' +obj).html('<a href="#">Next link</a><br /><a href="#">Next link</a><br /><a href="#">Next link</a>');
        }
 
        function out_me(obj) {
            //
 
            $('#' +obj).html('<a href="#">Old link</a>');
        }
 
    </script>
 
<body>
    <div id="item1" onmouseover="javascript: over_me('item1');" onmouseout="out_me('item1');">
        <a href="#" id="link1">Old link</a>
    </div>
</body>

просто следует решать более конкретную задачу (по месту). Для того, чтобы избежать передергиваний блоков (от "случайного" срабатывания событий, когда при наведении мышки срабатывает событие mouseover, которое меняет содержимое блока таким образом, что указатель оказывается за пределами прослушиваемого блока, тем самым вызывая событие mouseout), или, как в твоем случае, - нечеткого срабатывания события mouseout.

@seas71 · 10.05.2016, 16:41 **[ТС]**

Вот код:

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<head>
        <link rel="stylesheet" type="text/css" href="main_page2.css">
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>   
    <body>
        <script>
        onload = function () {
        
        $('#item1').mouseover(function(){
        $("#item1").css("z-index","1");
        document.getElementById('item1').innerHTML='<div><a href="#"><span class="name">ссылка 1</span></a><a href="#"><span class="name">ссылка 2</span></a></div>';
        })
        $("#item1").css("z-index","2");
        $('#item1').mouseout(function(){
        document.getElementById('item1').innerHTML='<a href="#"><span class="name">МАШИНОСТРОЕНИЕ</span></a>  ';
        })
        
        $('#item2').mouseover(function(){
        document.getElementById('item2').innerHTML='<div><a href="#"><span class="name">ссылка 1</span></a><a href="#"><span class="name">ссылка 2</span></a></div>';
        })
        $('#item2').mouseout(function(){
        document.getElementById('item2').innerHTML='<a href="#"><span class="name">ТЕХНОЛОГИЯ МАТЕРИАЛОВ</span></a>  ';
        })
                
        };
        </script>
        
    <div class="wrapper">
        <div class="masonry">
        <div id="item1" >
            <a href="#"><span class="name">МАШИНОСТРОЕНИЕ</span></a>  
        </div>
        
        <div id="item4">
        <a href="#"><span class="name">ЭЛЕКТРОНИКА, РАДИОТЕХНИКА И СИСТЕМЫ СВЯЗИ</span>
        </a>
        </div>
        
        <div id="item3" >
            <a   href="#"><span class="name">Вычислительная техника</span></a>    
        </div>
        
        <div id="item2">
        <a href="#"><span class="name">ТЕХНОЛОГИЯ МАТЕРИАЛОВ</span>
        </a>
        </div>
        
        <div id="item5">
        <a href="#"><span class="name">ЭЛЕКТРО - И ТЕПЛОЭНЕРГЕТИКА</span></a>
        </div>
            
        <div id="item7">
         <a href="#"><span class="name">...</span></a>
        </div>    
</div>
</div>
</body>

Добавлено через 9 минут
Действительно, не срабатывал mouseout, поправил стилевые описания, mouseover не корректно менял содержимое блока, поправил стилевые описания. Большое спасибо за подсказку!
Теперь столкнулся с еще одной проблемой- ошибочно срабатывает mouseout при переключениями между ссылками, т.е. происходят передергивания содержимого (не знаю как объяснить). Что-то тоже видимо нужно со стилями нахимичить чтобы не было области не охваченной ссылкой- верно? Или есть более рациональное решение этой проблемы?

@call_me_Frank · 10.05.2016, 17:06

Рациональнее - не заменять содержимое пунктов меню, а сделать, например, подменю, и при наведении указателя на пункт основного меню располагать его рядом. + да, нужно отталкиваться в том числе и от верстки (в данном примере она практически отсутствует).

Если установить заданные размеры пунктов меню, то можно располагать блок с ссылками ровно поверх основного пункта меню (который мы "заменяем") и устанавливать ему событие onmouseout (а не основному пункту меню item1), по которому мы этот блок ссылок будем прятать.

@seas71 · 10.05.2016, 17:15 **[ТС]**

call_me_Frank, vnmslf Спасибо Вам большое за помощь! Действительно, попробую убрать "замену" и сделать перекрытие блоков. По поводу передергивания внутри блока при переходах- нашел события mouseenter/mouseleave - они не учитывают переход внутри блока, передергивания пропали.

Новые блоги и статьи Все статьи Все блоги /
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .
Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .

@call_me_Frank 5 / 5 / 1 Регистрация: 02.07.2015 Сообщений: 29
	25.04.2016, 10:05
	По сути задача - обыкновенный слайдер. используй связку с JavaScript. "Атрибут tabindex определяет последовательность перехода между ссылками при нажатии на кнопку Tab." - это не то, что тебе нужно ) 0

@seas71 0 / 0 / 0 Регистрация: 12.11.2015 Сообщений: 13
	25.04.2016, 11:20 [ТС]
	Просто css не отделаться? Там ведь есть псевдоклассы active, hover. Т.е. есть варианты реализации меню на CSS используя псевдоклассы. 0

@vnmslf 25 / 25 / 5 Регистрация: 13.03.2015 Сообщений: 215
	10.05.2016, 15:55
	Попробуйте через js при наведении/клике/насморке/нашествии пчел у одного элемента ставить значение z-index (zIndex в js будет) в 1, а у другого в 2. При клике на другой блок - наоборот. Или менять через display: none/inline-block, или visibility: hidden/visible - в зависимости от того, что вам нужно. Или вообще toggleClass. 1

@call_me_Frank 5 / 5 / 1 Регистрация: 02.07.2015 Сообщений: 29
	10.05.2016, 17:06
	Рациональнее - не заменять содержимое пунктов меню, а сделать, например, подменю, и при наведении указателя на пункт основного меню располагать его рядом. + да, нужно отталкиваться в том числе и от верстки (в данном примере она практически отсутствует). Если установить заданные размеры пунктов меню, то можно располагать блок с ссылками ровно поверх основного пункта меню (который мы "заменяем") и устанавливать ему событие onmouseout (а не основному пункту меню item1), по которому мы этот блок ссылок будем прятать. 1

@seas71 0 / 0 / 0 Регистрация: 12.11.2015 Сообщений: 13
	10.05.2016, 17:15 [ТС]
	call_me_Frank, vnmslf Спасибо Вам большое за помощь! Действительно, попробую убрать "замену" и сделать перекрытие блоков. По поводу передергивания внутри блока при переходах- нашел события mouseenter/mouseleave - они не учитывают переход внутри блока, передергивания пропали. 0