Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
Destroyer
0 / 0 / 1
Регистрация: 24.10.2014
Сообщений: 47
1

Оптимизировать скрипт

23.04.2017, 20:45. Просмотров 750. Ответов 3
Метки нет (Все метки)

Javascript
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
<script>
    $(function(){
    $(".menu1").click(function(){
    jQuery('.menu1').addClass("active");
    jQuery('#menu1').show();    
    jQuery('#menu2').hide();    
    jQuery('#menu3').hide();    
    jQuery('#menu4').hide();    
    jQuery('#menu5').hide();    
    jQuery('#menu6').hide();    
    jQuery('#menu7').hide();
    jQuery('.hid').hide();  
    jQuery('.menu2').removeClass("active"); 
    jQuery('.menu3').removeClass("active"); 
    jQuery('.menu4').removeClass("active"); 
    jQuery('.menu5').removeClass("active"); 
    jQuery('.menu6').removeClass("active"); 
    jQuery('.menu7').removeClass("active"); 
    
    
    
  });
  
  $(".menu2").click(function(){
    jQuery('.menu2').addClass("active");
    jQuery('#menu2').show();    
    jQuery('#menu1').hide();    
    jQuery('#menu3').hide();    
    jQuery('#menu4').hide();    
    jQuery('#menu5').hide();    
    jQuery('#menu6').hide();    
    jQuery('#menu7').hide();    
    jQuery('.hid').hide();  
    jQuery('.menu1').removeClass("active"); 
    jQuery('.menu3').removeClass("active"); 
    jQuery('.menu4').removeClass("active"); 
    jQuery('.menu5').removeClass("active"); 
    jQuery('.menu6').removeClass("active"); 
    jQuery('.menu7').removeClass("active"); 
    
    
  });
 });
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="menu1">
    Скрытый слой 1
</div>
<div id="menu2">
    Скрытый слой 1
</div>
 
 
<div class="menu1">Меню 1</div>
<div class="menu2">Меню 2</div>
 
 
<div class="hid">
  Контент, который скрывается при появлении окна
</div>
Есть такой скрипт (привел только часть,остальное повторяется). По клику на меню скрывается основной контент (слой hide) , открывается определенный скрытый слой (#menu1) и к меню добавляется класс active. для Как можно его оптимизировать,чтобы отказаться от огромного кода? И как еще добавить появление скрытого слоя с эффектом fade?
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
23.04.2017, 20:45
Ответы с готовыми решениями:

Как оптимизировать скрипт, который меняет ширину блока
Вот скрипт, который меняет ширину блока. Есть две ссылки, которые выполняют по клику функции...

Необходимо вставить в скрипт увеличения картинки, скрипт просмотра панорамы 360
Здравствуйте. У меня такой специфический вопрос, на моем сайте имеется скрипт для увеличения...

Вызвать скрипт через другой скрипт
Всем привет! Такая ситуация. Есть скрипт 1, который служит для аякс подгрузки новостей. Есть скрипт...

оптимизировать заставки
Здраствуйте. Может кто нибуть подсказать как можно оптимизировать заставки? Заранее благодарю.

Оптимизировать работу
Подскажите что необходимо менять в JS для того что бы получить мне нужный результат. Сейчас JS...

3
and_y87
Web-Разработчик
409 / 357 / 71
Регистрация: 27.02.2012
Сообщений: 1,316
Записей в блоге: 85
24.04.2017, 13:44 2
Лучший ответ Сообщение было отмечено Destroyer как решение

Решение

делается через родителя...

и сделайте логику попроще...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="tab_container">
  <div id="menu1">
    Скрытый слой 1
  </div>
  <div id="menu2">
    Скрытый слой 1
  </div>
</div>
 
<div class="tab_controller">
  <a href="#menu1">Меню 1</a>
  <a href="#menu2">Меню 2</a>
</div>  
 
<div class="hid">
  Контент, который скрывается при появлении окна
</div>
Javascript
1
2
3
4
5
6
7
8
$(".tab_controller A").on('click', function(e){
  e.preventDefault();
  $('.tab_container DIV').hide();
  $('.tab_container .active').removeClass("active");
  var $item  = $( $(this).attr('href') );
  $item.addClass('active').show();
  $('.hid').hide();
})
1
Destroyer
0 / 0 / 1
Регистрация: 24.10.2014
Сообщений: 47
24.04.2017, 20:19  [ТС] 3
and_y87, спасибо за ответ! но как сделать,чтобы active присваивался к пункту меню, а не к модальному окну? И как добавить эффект fade к появлению окна?

Добавлено через 17 минут
В итоге получился такой скрипт:

Javascript
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
<script>
    $(function(){
    $(".leftmenu A").on('click', function(e){
  e.preventDefault();
        
        if($(this).hasClass('active')){$(this).removeClass('active');return;}
$('.leftmenu a').removeClass('active');
$(this).addClass('active');
  $('.modal .mod').hide();
  $('.modal .active').removeClass("active");
  var $item  = $( $(this).attr('href') );
  $item.addClass('active').fadeIn( "slow", function() {
    // Animation complete
  });
  $('.hid').hide();
})
  
  $(".close").click(function(){
    $('.modal .mod').hide();
    jQuery('.hid').fadeIn( "slow", function() {
    // Animation complete
  });
    jQuery('.leftmenu a').removeClass("active");    
    
    
    
  });
  
    });
    </script>
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="modal">
 <div id="menu1" class="mod">
    Скрытый слой 1
 </div>
 <div id="menu2" class="mod">
    Скрытый слой 1
 </div>
</div>
 
<a href="#menu1">Меню 1</a>
<a href="#menu2">Меню 2</a>
 
 
<div class="hid">
  Контент, который скрывается при появлении окна
</div>
0
and_y87
Web-Разработчик
409 / 357 / 71
Регистрация: 27.02.2012
Сообщений: 1,316
Записей в блоге: 85
25.04.2017, 08:39 4
Цитата Сообщение от Destroyer Посмотреть сообщение
and_y87, спасибо за ответ! но как сделать,чтобы active присваивался к пункту меню, а не к модальному окну? И как добавить эффект fade к появлению окна?
Javascript
1
2
3
4
5
6
7
$(".tab_controller A").on('click', function(e){
  e.preventDefault();
  $('.tab_container DIV').hide();
  $('.tab_controller A.active').removeClass("active");
  $('.hid').hide();
  $( $(this).addClass('active').attr('href') ).fadeIn();
})
0
25.04.2017, 08:39
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
25.04.2017, 08:39

Как оптимизировать код ?
Как привести его в порядок ? $(document).ready(function(){ var otherVideo =...

JS - ухитриться оптимизировать AJAX
Всем привет, ребят! Написал небольшой скрипт на AJAX со связкой с РНР. Так вот: JS отправляет...

Как упростить/оптимизировать js?
Друзья в js понимаю мало, написал вот такой код https://jsfiddle.net/adash/8h3L2thk/ первая и...


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

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

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