Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.73/11: Рейтинг темы: голосов - 11, средняя оценка - 4.73
0 / 0 / 0
Регистрация: 05.12.2014
Сообщений: 12
1

Как сделать несколько активных блоков?

05.12.2014, 01:48. Просмотров 2270. Ответов 14
Метки нет (Все метки)


Доброго времени суток...сразу сори если вопрос туповат...только начинаю осваивать верстку

Собственно в чем дело, есть код вроде не особо сложный

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
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script>
        $(function() {
            $(".btn-slide").click(function() {
                $("#panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
        });
    </script>
    <style>
        #panel {    
            display: none;
            padding: 5px;
            width: 400px;
            height: 200px;
            background: #09F;
            color: #FFF;
            }
        .btn-slide {
            background: #CCC;
            color: #06F;
            }
        .active {
            background: #FF9;
            }
    </style>
</head>
<body>
    <a href="" class="btn-slide">ссылка или картинка</a>
    <div id="panel">
        Бла бла бла бла текст или ссылка
    </div>
Здесь получается одна ссылка с выползающим текстом, а как сделать их допустим 4 штуки в ряд горизонтально и чтоб под каждым ровненько выползал текст чего-то не втыкаю.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
05.12.2014, 01:48
Ответы с готовыми решениями:

Как сделать несколько блоков, исчезающих одновременно, при наведении хотя бы на один их них
Как сделать несколько блоков, исчезающих одновременно, при наведении хотя бы на один их них? ...

Как при наведении на ссылку или иконку сделать так что бы несколько блоков сдвинулись?
Здравствуйте форумчане, помогите пожалуйста. Как при наведении на ссылку или иконку сделать так...

Как сделать отступы у блоков
Как сделать чтоб отступ от блоков в средине красных контейнеров от красных был по 10 ,а между собой...

Как сделать отступы у блоков
Как сделать чтоб в красном блоке по бока был отступ по 10 от синего ,а синих блоков отступ по 2...

__________________
Помогаю в написании студенческих работ здесь.
14
28 / 28 / 12
Регистрация: 31.01.2011
Сообщений: 311
05.12.2014, 16:45 2
Добавьте еще 3 ссылки.. Ссылка инлайновый элемент, поэтому все ссылки будут расположены в одну строку.
Или может я не совсем поняла вопрос..
0
279 / 279 / 62
Регистрация: 28.08.2014
Сообщений: 432
05.12.2014, 20:23 3
ИМХО, нужно ссылки с соответствующим текстом поместить в див
HTML5
1
2
3
4
5
6
<div>
    <a href="" class="btn-slide">ссылка или картинка</a>
    <div class="panel">
        Бла бла бла бла текст или ссылка
    </div>
</div>
Заменить id="panel" на class="panel"

и код подправить
Javascript
1
2
3
4
5
6
   $(function() {
            $(".btn-slide").click(function() {
                $(this).siblings(".panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
        });
Тут $(this).siblings(".panel") будет ссылаться только на тот блок <div class="panel">, который лежит в одном внешнем диве со ссылкой, по которой кликнули. Поэтому теперь вот таких блоков
HTML5
1
2
3
4
5
6
<div>
    <a href="" class="btn-slide">ссылка или картинка</a>
    <div class="panel">
        Бла бла бла бла текст или ссылка
    </div>
</div>
можете поставить на страницу сколько угодно - всё должно работать. Если хотите, чтоб они располагались в строчку, пропишите display: inline-block для дива-обертки.
0
0 / 0 / 0
Регистрация: 05.12.2014
Сообщений: 12
05.12.2014, 23:39  [ТС] 4
Спасибо, но чего-то не выходит.

Вместо <div id="panel"> написал <div class="panel"> и текст вылез на ружу который "бла бла бла..."

то есть самого экшена не происходит просто ссылка и под ней текст... если просто размножаю блок... с параметром inline-block... они в линию то выстраиваются... но при нажатии на любой блок...

все сползают под первый и текст выезжает только из под первого блока, а как текст назад уползает, обратно в линию выстраиваются, да и при нажатии на первый... тоже самое под ним вылезает текст...но при этом остальные ныряют под него... float: left тоже пробовал...текст выезжать начинает под каждой ссылкой но не под ней а справа...

пробовал и для каждого сделать свой скрипт ... то есть для первого

Javascript
1
2
3
4
5
6
$(function() {
            $(".btn-slide").click(function() {
                $(this).siblings(".panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
        });
для второго

Javascript
1
2
3
4
5
6
$(function() {
            $(".btn-slide2").click(function() {
                $(this).siblings(".panel2").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
        });
и т.д.

тоже ничего не выходит... все сикось на кось .... и в таблицу запихивал...в таблице вроде получается чтоб под каждым отдельно выезжало, но при нажатии на один остальные съезжают вверх... в общем маленький но вредный код...да и я не асс ниразу...в любом случае спасибо...буду мучиться дальше...и сюда заглядывать....потому что такое ощущение...что в какой-то одной строчке и маленьком коде косяк...а найти не могу(
0
279 / 279 / 62
Регистрация: 28.08.2014
Сообщений: 432
05.12.2014, 23:55 5
Цитата Сообщение от LionMoscow Посмотреть сообщение
Вместо <div id="panel"> написал <div class="panel"> и текст вылез на ружу который "бла бла бла..."
Вы в стилях-то поменяли #panel на .panel?

Добавлено через 9 минут
Рабочий вариант: http://jsfiddle.net/ludmilasv/g5w9Lf2n/

Добавлено через 3 минуты
Цитата Сообщение от LionMoscow Посмотреть сообщение
но при нажатии на любой блок...
остальные ныряют под него...
Чтоб не ныряли, надо было поставить абсолютное позиционирование этим блокам, и относительное - родительскому, чтобы расстояния top и left считались от него, а не от body.
1
0 / 0 / 0
Регистрация: 05.12.2014
Сообщений: 12
06.12.2014, 20:02  [ТС] 6
Вот теперь все супер...спасибо огромное =)
0
0 / 0 / 0
Регистрация: 05.12.2014
Сообщений: 12
09.12.2014, 01:05  [ТС] 7
теперь блин другая загвоздка....пытаюсь сделать так чтоб не при нажатии выезжало меню , а при наведении...и собственно уводишь мышку оно закрывается само... только не пойму это в скрипте проблема или в дивах?
0
1 / 1 / 0
Регистрация: 07.10.2014
Сообщений: 22
09.12.2014, 01:41 8
псевдокласс :hover - Это для CSS.
Поможет при наведении.

Для JQuery - поможет mouseover

http://jquery-docs.ru/events/mouseover/

"Данное событие обычно активируется, когда указатель находится в пределах области элемента."
1
0 / 0 / 0
Регистрация: 05.12.2014
Сообщений: 12
09.12.2014, 02:26  [ТС] 9
Ага...чего-то понял... так как только осваиваю...еще раз прошу прощения за туговатость свою...допустим:

Javascript
1
2
3
4
5
6
7
8
9
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script>
        $(function() {
            $(".btn-slide").click(function() {
                $(this).siblings(".panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
        });
    </script>
я поменял на:

Javascript
1
2
3
4
5
6
7
8
9
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script>
        $(function() {
            $(".btn-slide").mouseover(function() {
                $(this).siblings(".panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
        });
    </script>
то есть функцию .click я поменял на функцию .mouseover

в итоге получилось ... но не совсем. При наведении как и хотел выезжает текст. Но чтоб текст уехал обратно тоже нужно еще раз навести на кнопку...я так понимаю мне нужно пристроить еще функцию .mouseout

и чего то не пойму как правильно это сделать
0
279 / 279 / 62
Регистрация: 28.08.2014
Сообщений: 432
09.12.2014, 13:46 10
Надо добавить точно такую же функцию, но с событием .mouseout.
Дело в том, что Toggle работает так: если элемент виден, slideToggle его прячет, если не виден - показывает.
toggleClass - аналогично: если элемент имеет класс active, toggleClass("active") этот класс уберет, если не имеет - поставит.
1
0 / 0 / 0
Регистрация: 05.12.2014
Сообщений: 12
09.12.2014, 16:34  [ТС] 11
таакс все вышло...навожу на кнопку выезжает увожу отъезжает)) .. и тут я наткнулся на еще один косячек...мsшку я отвожу и то что выехало сразу уезжает... а если я туда допустим ссылку вставлю то человек нажать не успеет... подскажите куда копать чтоб был эффект такой...навожу --> выезжает панель --> и когда я с панели убираю мышку, а не с кнопки, то она заезжает обратно... я так понимаю мне с кнопки нужно как раз убрать функцию .mouseout и привинтить ее к панели... то бишь добавить к этому коду:

Javascript
1
2
3
4
5
6
7
8
9
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script>
        $(function() {
            $(".btn-slide").mouseover(function() {
                $(this).siblings(".panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
        });
    </script>
что-то вроде

Javascript
1
2
$(function() {
            $(".panel").mouseout(function()
и добавить движение наверх... и опять не хватает чего-то соображалки чего дальше написать в функцию... или вообще не так ?
0
279 / 279 / 62
Регистрация: 28.08.2014
Сообщений: 432
09.12.2014, 16:44 12
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
$(function() {
            $(".btn-slide").mouseover(function() {
                $(this).siblings(".panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
 
    
            $(".panel").mouseout(function() {
                $(this).slideToggle("slow");
                $(this).siblings(".btn-slide").toggleClass("active");
            });
        });
http://jsfiddle.net/ludmilasv/g5w9Lf2n/1/
1
0 / 0 / 0
Регистрация: 05.12.2014
Сообщений: 12
09.12.2014, 17:33  [ТС] 13
блин....все получилось...но если я добавляю параметр <p> для ссылок(ну чтоб в столбик были) то при наведении на текст окно начинает прыгать туда сюда само...

http://jsfiddle.net/g5w9Lf2n/2/
0
279 / 279 / 62
Регистрация: 28.08.2014
Сообщений: 432
09.12.2014, 18:39 14
Дело в том, что когда Вы добавляете <p> и ставите мышь на этот элемент <p>, то с <div class="panel"> мышь вроде как уходит (переходит на дочерний элемент) - вот оно и дергается.
Т.е. либо надо ставить <br>, а не <p>,
либо, если уж так нужны <p>, пишите mouseleave вместо mouseout. Разница между ними - как раз в учете переходов на дочерние элементы.
1
0 / 0 / 0
Регистрация: 05.12.2014
Сообщений: 12
09.12.2014, 19:06  [ТС] 15
Безмерно благодарен, вот остановился когда-то на обучении а-ля "последняя страница учебника по информатике"(там где основные теги хтмл написаны)...теперь вот понадобилось и пошли мучения...

Теперь буду пытаться сделать для самой кнопки псевдокласс hover... хочу чтоб красивее было...надеюсь справлюсь

P.S. Если не сложно посоветуйте может литературу какую, чтоб по пути на работу не в телефоне играть, а ликбезом заниматься
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
09.12.2014, 19:06

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Как сделать высоту блоков одинаковой
Здравствуйте, помогите выстроить блоки в нужной последовательности. В основном блоке, с шириной...

Как можно добиться такого расположения блоков и как сделать такие фигуры?
Сделал фигуры по этому коду height: 0; width: 47%; border-top: 430px solid #FFE344; ...

Как сделать верстку таких блоков как на примере?
Подскажите какие моменты необходимо учитывать при верстке подобных конструкций ? Если делать...

Как сделать border-collapse для div блоков?
Здравствуйте. Имею такую простую конструкци. &lt;div class=&quot;right&quot;&gt;&lt;/div&gt;&lt;div...


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

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

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