Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
seas71
0 / 0 / 0
Регистрация: 12.11.2015
Сообщений: 13
#1

Обработка клика css - HTML, CSS

25.04.2016, 09:52. Просмотров 1550. Ответов 11
Метки нет (Все метки)

Друзья, добрый день. Задача такая - есть блок с произвольной информацией и нужно чтобы по клику информация в блоке менялась. Вот примерно так (приложение). Не пойму как правильно описать этот самый клик по блоку чтобы в блоке вывелась другая информация (информация по идее должна выводится из другого div). И как при такой разметке быть с позиционированием этих блоков. Пробовал так:
CSS
1
2
.item1:active  ~ .info1,
.item2:active  ~ .info1
при такой разметке
PHPHTML
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?
http://www.cyberforum.ru/html/thread1336257.html
0
Миниатюры
Обработка клика css  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
25.04.2016, 09:52
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Обработка клика css (HTML, CSS):

CSS, не работает ссылка на .css документ через java script
&lt;head&gt; &lt;title&gt;Сайта&lt;/title&gt; &lt;script language=JavaScript&gt; ...

Плагин для css с возможностью создания переменных в css файле
Один раз наткнулся в интернете на интересный плагин для css, похожий на jquery...

Gulp критичный css, инструмент для генерации критичного css
Пытаюсь закрыть последний пункт в googlespeed: &quot;Удалите код JavaScript и CSS,...

Как сделать вот такой макет через html и css (div и css)
Доброго времени суток.Подскажите как сделать по скрину ?* что бы было Лого на...

Css стили перебиваются css стилями от addthis.com сервиса шаринга через соц.сети
Есть ссылка: &lt;a class=&quot;addthis_button_vk&quot;&gt;&lt;div id=&quot;sb_vk_div&quot;&gt;&lt;/div&gt;&lt;/a&gt;...

11
call_me_Frank
4 / 4 / 1
Регистрация: 02.07.2015
Сообщений: 29
25.04.2016, 10:05 #2
По сути задача - обыкновенный слайдер. используй связку с JavaScript.

"Атрибут tabindex определяет последовательность перехода между ссылками при нажатии на кнопку Tab." - это не то, что тебе нужно )
0
seas71
0 / 0 / 0
Регистрация: 12.11.2015
Сообщений: 13
25.04.2016, 11:20  [ТС] #3
Просто css не отделаться? Там ведь есть псевдоклассы active, hover. Т.е. есть варианты реализации меню на CSS используя псевдоклассы.
0
call_me_Frank
4 / 4 / 1
Регистрация: 02.07.2015
Сообщений: 29
25.04.2016, 13:07 #4
Думаю, что нет. Если ты хочешь упростить задачу, то, ограничиваясь только 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; }
0
seas71
0 / 0 / 0
Регистрация: 12.11.2015
Сообщений: 13
10.05.2016, 15:50  [ТС] #5
Действительно криво получается без 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> (т.е. если несколько ссылок- отображается только первая). Что-то не так, помогите пожалуйста разобраться!
0
vnmslf
25 / 25 / 5
Регистрация: 13.03.2015
Сообщений: 214
10.05.2016, 15:55 #6
Попробуйте через js при наведении/клике/насморке/нашествии пчел у одного элемента ставить значение z-index (zIndex в js будет) в 1, а у другого в 2. При клике на другой блок - наоборот. Или менять через display: none/inline-block, или visibility: hidden/visible - в зависимости от того, что вам нужно. Или вообще toggleClass.
1
seas71
0 / 0 / 0
Регистрация: 12.11.2015
Сообщений: 13
10.05.2016, 16:21  [ТС] #7
Попробовал так- тоже самое:
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");
        })
0
vnmslf
25 / 25 / 5
Регистрация: 13.03.2015
Сообщений: 214
10.05.2016, 16:23 #8
Цитата Сообщение от 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>. Может в этом дело? Выложите весь код, давайте попробуем разобраться
1
call_me_Frank
4 / 4 / 1
Регистрация: 02.07.2015
Сообщений: 29
10.05.2016, 16:30 #9
По-разному можно сделать. Можно работать не с 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.
1
seas71
0 / 0 / 0
Регистрация: 12.11.2015
Сообщений: 13
10.05.2016, 16:41  [ТС] #10
Вот код:
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 при переключениями между ссылками, т.е. происходят передергивания содержимого (не знаю как объяснить). Что-то тоже видимо нужно со стилями нахимичить чтобы не было области не охваченной ссылкой- верно? Или есть более рациональное решение этой проблемы?
0
call_me_Frank
4 / 4 / 1
Регистрация: 02.07.2015
Сообщений: 29
10.05.2016, 17:06 #11
Рациональнее - не заменять содержимое пунктов меню, а сделать, например, подменю, и при наведении указателя на пункт основного меню располагать его рядом. + да, нужно отталкиваться в том числе и от верстки (в данном примере она практически отсутствует).

Если установить заданные размеры пунктов меню, то можно располагать блок с ссылками ровно поверх основного пункта меню (который мы "заменяем") и устанавливать ему событие onmouseout (а не основному пункту меню item1), по которому мы этот блок ссылок будем прятать.
1
seas71
0 / 0 / 0
Регистрация: 12.11.2015
Сообщений: 13
10.05.2016, 17:15  [ТС] #12
call_me_Frank, vnmslf Спасибо Вам большое за помощь! Действительно, попробую убрать "замену" и сделать перекрытие блоков. По поводу передергивания внутри блока при переходах- нашел события mouseenter/mouseleave - они не учитывают переход внутри блока, передергивания пропали.
0
10.05.2016, 17:15
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
10.05.2016, 17:15
Привет! Вот еще темы с решениями:

Как создать фон сайта с помощью CSS и где почитать про использование CSS
Как создать фон сайта с помощью CSS, приведите пример пожалуйста. И если будет...

Как дополнить CSS, чтобы строку со свойством в CSS воспринимал только конкретный браузер
Bona fortuna, джентельмены, у меня вопрос - Как дополнить ксс, что бы строку со...

CSS медиа запросы - CSS правила по умолчанию
Всем доброго времени суток, Интересует такой вопрос: @media screen позволяют...

Позиционирование CSS и граница треугольного div на CSS
Добрый день, подскажите как сделать что бы при изменении масштаба div не...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru