Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
15 / 15 / 9
Регистрация: 22.11.2013
Сообщений: 762
1

Toggle Functions

03.07.2014, 14:53. Просмотров 637. Ответов 6
Метки нет (Все метки)

Подскажите. Я вот делаю одностраничный сайт - визитку. Например имеется 5 дивов и 5 ссылок(меню). Хочу сделать, чтобы при клике на один из пунктов меню активный див скрывался и появлялся тот, на который я кликну по ссылке.

т.е. Имеется "Главная" "Услуги" "Доставка" "Контакты" "О нас". И соответствеено имеются 5 дивов с разным контентом.
Нужно чтобы при клике например на "Контакты", скрывался активный див и показывался див с контентом контакты.

Как это сделать я знаю, но не знаю как узнать активный див, который сейчас открыт. Подскажите как узнать можно?)
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
03.07.2014, 14:53
Ответы с готовыми решениями:

Toggle
jQuery JavaScript Library v1.5 в этой библиотеке Такой код например...

Toggle()
$(document).ready(function(){ $('#post').click(function(){ $("#textpost").toggle(250);...

Toggle()
Исчезает сама надпись "Свернуть форму" что не так? <div id="closeForm">Свернуть форму</div>...

toggle()
Здраствуйте, как применить к toggle() при "block" эфект fadeOut(), а при "none" 'эфект fadeIn() и...

6
657 / 629 / 333
Регистрация: 26.04.2014
Сообщений: 2,099
03.07.2014, 17:33 2
У которого display не none тот и открыт...
0
15 / 15 / 9
Регистрация: 22.11.2013
Сообщений: 762
03.07.2014, 18:46  [ТС] 3
Цитата Сообщение от alexsamos33 Посмотреть сообщение
У которого display не none тот и открыт...
Да ладно?
0
1447 / 355 / 61
Регистрация: 03.04.2010
Сообщений: 2,095
03.07.2014, 20:03 4
Думаю Вам это пригодится.
Javascript
1
2
jQuery('.element:visible'); // Все элементы с классом .element, которые видны
jQuery('.element:hidden'); // Все элементы с классом .element, которые спрятаны (display: none)
1
Game & FullStack Разраб
409 / 357 / 71
Регистрация: 27.02.2012
Сообщений: 1,318
Записей в блоге: 85
03.07.2014, 20:15 5
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
27
28
29
30
31
32
33
<div class="block__tabs">
 
    <div class="b-tabs__header">
        <a class="b-tabs__tab " href="#form"> form</a>
        <a class="b-tabs__tab " href="#script"> script</a>
        <a class="b-tabs__tab _active" href="#about"> about </a>
    </div>
 
    <div class="b-tabs__body">
 
        <div class="b-tabs__part " id="form">
 
            <h5> 1 </h5>
 
        </div>
 
 
 
        <div class="b-tabs__part none" id="script">
 
            <h5> 2 </h5>
 
        </div>
 
        <div class="b-tabs__part none" id="about_send">
 
            <h4> 3 </h4>
 
        </div>
 
    </div>
 
</div>
jQuery
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 $('.b-tabs__tab').on(
    'click',
    function(e)
    {
        var obj = $(this);
        if ( obj.hasClass('_active')  ) return false;
        var id = obj.attr('href');
               
        $('.b-tabs__tab').removeClass('_active');
        $('.b-tabs__part').addClass('none');
                
        obj.addClass('_active');
        $( id ).removeClass('none');
                
        e.preventDefault;
        return false;
    }
);
CSS
1
.none { display: none; }
1
15 / 15 / 9
Регистрация: 22.11.2013
Сообщений: 762
03.07.2014, 21:20  [ТС] 6
Я решил проблемку, сдеал как хотел) только вот вопрос. Можно ли как-то уменьшить этот код? Потому что я думаю что там лишнего хватает) Этот код для каждого дива прописал и все ок)
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
$('.my-galery').click(function(){
 
            if (($('.current').length > 0)) {
                $('.current').hide(700).removeClass('current');
                $('#my-galery').show(1000).addClass('current');
                return false;
            }
            else {
                $('#my-galery').show(500).addClass('current');
            }
            
        });
0
Game & FullStack Разраб
409 / 357 / 71
Регистрация: 27.02.2012
Сообщений: 1,318
Записей в блоге: 85
03.07.2014, 22:02 7
bb_oo, Код маленький...
тебя смущает неоднократное вкропление одинаковых классов и id ...

Оптимизируя можно добиться такого кода, но он будет больше:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 $('.my-galery').click(
        function()
        {
            var name = 'current',
                obj = $('.current'),
                gallery = $('#my-galery');
 
            if (  obj.length == 0  )
            {
                gallery.show( 500 ).addClass( name );
            }
            else
            {
                obj.hide( 700 ).removeClass( name );
                gallery.show( 1000 ).addClass( name );
                return false;
            }
        }
    );
преимущество данного кода в том что имя класа и id заменяется в 1 месте...
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
03.07.2014, 22:02

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

Работа с .toggle
Здравствуйте! Раньше пользывался .toggle без проблем. А теперь что-то случилсоь не хорошое. ...

Функция toggle()
Всем привет, я новичок в JS,отсюда вопрос такой... // Свертывание формы сообщения...

неразбериха с toggle
Здравствуйте. У меня вот такая проблема - стал изучать jquery, столкнулся с методом toggle, но что...

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


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

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

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