Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
seas71
0 / 0 / 0
Регистрация: 12.11.2015
Сообщений: 13
#1

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

25.04.2016, 09:52. Просмотров 1223. Ответов 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?
0
Миниатюры
Обработка клика css  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
25.04.2016, 09:52
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Обработка клика css (HTML, CSS):

Обработка нажатия Radio кнопки средствами css - HTML, CSS
Подскажите, пожалуйста, как можно реализовать такую идею. Вот html код таблицы: &lt;table width=&quot;200&quot; height=&quot;100&quot; border=&quot;1&quot;...

CSS, не работает ссылка на .css документ через java script - HTML, CSS
&lt;head&gt; &lt;title&gt;Сайта&lt;/title&gt; &lt;script language=JavaScript&gt; if (screen.width &lt; '810') {document.write...

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

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

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

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

11
call_me_Frank
4 / 4 / 0
Регистрация: 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 / 0
Регистрация: 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
24 / 24 / 4
Регистрация: 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
24 / 24 / 4
Регистрация: 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 / 0
Регистрация: 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 / 0
Регистрация: 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 стилями от addthis.com сервиса шаринга через соц.сети - HTML, CSS
Есть ссылка: &lt;a class=&quot;addthis_button_vk&quot;&gt;&lt;div id=&quot;sb_vk_div&quot;&gt;&lt;/div&gt;&lt;/a&gt; class=&quot;addthis_button_vk&quot; отвечает за css ссылки, он...

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

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

Есть 2 файла html и css как мне сделать чтоб файл css распространялся на одну ячейку а не на все - HTML, CSS
&lt;table class=&quot;s&quot;&gt; &lt;tr&gt; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot;&gt; &lt;td&gt;10&lt;/td&gt; ...


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

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

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