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

Toggle Functions

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

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

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

Как это сделать я знаю, но не знаю как узнать активный див, который сейчас открыт. Подскажите как узнать можно?)
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.07.2014, 14:53
Ответы с готовыми решениями:

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

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

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

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

Don't make functions within a loop
Есть код: var ul,.... и т.д.; for(x = 0; x < len; ++x){ ul.append( $('<li></li>', {...

6
alexsamos33
620 / 600 / 325
Регистрация: 26.04.2014
Сообщений: 1,976
03.07.2014, 17:33 2
У которого display не none тот и открыт...
0
bb_oo
15 / 15 / 9
Регистрация: 22.11.2013
Сообщений: 762
03.07.2014, 18:46  [ТС] 3
Цитата Сообщение от alexsamos33 Посмотреть сообщение
У которого display не none тот и открыт...
Да ладно?
0
Vlad_IT
1442 / 351 / 60
Регистрация: 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
and_y87
Web-Разработчик
409 / 357 / 71
Регистрация: 27.02.2012
Сообщений: 1,316
Записей в блоге: 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
bb_oo
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
and_y87
Web-Разработчик
409 / 357 / 71
Регистрация: 27.02.2012
Сообщений: 1,316
Записей в блоге: 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
03.07.2014, 22:02
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
03.07.2014, 22:02

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

Применение toggle()
Здравствуйте! У меня нечего не происходить в таком коде $(document).ready(function(){ ...

Не работает toggle
Подскажите пожалуйста почему не работает toggle #togglecontact при клике на #contacts. Эти разделы...


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

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

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