- Махане на active от елемент
12
WT форуми -> HTML / Javascript / CSS -> Махане на active от елемент
Създайте нова тема Напишете отговор 
Автор Съобщение
vinsbg
Редовен
Редовен

Регистриран на: 28/01/2009 2:21 pm

Support: 51
Bonus: 87
Мнения: 2581
Мнение 18/07/2018 12:32 pm     Махане на active от елемент Отговорете с цитат


Здравейте,

Забърках се нещо с този JS и ще ми е нужна малко помощ. Имам страница на която са листнати 10-тина категории. Това, което искам е когато отворя страницата по дефолт да е кликнато(да зареди) елемнти от първата категория.

Като се натисне на друга категория да се сменя съответно съдържанието и active класа.

Проблема е, че имам 2 актив класа и не мога да махна от дефолтната категория..Ето кода
HTML code:

<ul class="navigation">
<li class="category active"><a href="#">1</a></li>
<li class="category"><a href="#">2</a></li>
<li class="category"><a href="#">3</a></li>
<li class="category"><a href="#">4</a></li>
</ul>

А това ми е JS-то. 2 различни части е:

1. click() event, за да зареди първата категория по дефолт
2. да сменя active класа, когато се клика на другите

  var active = 0;
   for (var i = 0; i < document.links.length; i++) {
      if (document.links[i].href === document.URL) {
         active = i;
      }
   }

   document.links[active].className = 'active';
 
  $('#category').find('a').trigger('click');
 
  $('li.category:first-child').addClass('active'); 
  $('li.category').click(function(){
     $('li.category:first-child').removeClass('active');
     $(this).addClass('active');
  });

Искам да кажа, че хич ме няма в JS-то и най-вероятно е голяма бъркотия.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
anonimen
Активен
Активен

Регистриран на: 11/06/2012 8:07 pm

Support: 156
Bonus: 311
Мнения: 1441
Мнение 18/07/2018 1:12 pm      Отговорете с цитат


набързо ще отбележа, че от тази част няма нужда:

Цитат:
var active = 0;
for (var i = 0; i < document.links.length; i++) {
if (document.links[i].href === document.URL) {
active = i;
}
}

document.links[active].className = 'active';



Нали вече в html-а си задал аctive класа по подразбиране?

Малко по-късно ще мога да отговоря и на другия ти въпрос, ако никой още не ти е отговорил.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
vinsbg
Редовен
Редовен

Регистриран на: 28/01/2009 2:21 pm

Support: 51
Bonus: 87
Мнения: 2581
Мнение 18/07/2018 1:14 pm      Отговорете с цитат


Да, задал съм го, но без тази част пък не добавя active на друг, когато кликна и съответно не му променя цвета.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
anonimen
Активен
Активен

Регистриран на: 11/06/2012 8:07 pm

Support: 156
Bonus: 311
Мнения: 1441
Мнение 18/07/2018 1:18 pm      Отговорете с цитат


Цитат:
$('#category').find('a').trigger('click');

тук пише #category, докато в html използваш class.

Също, find('a') ще намери всички 'а' елементи. Теб ти трябва

$('a.active').trigger('click')

Т.е. да намери а-то, което има клас 'active'.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
vinsbg
Редовен
Редовен

Регистриран на: 28/01/2009 2:21 pm

Support: 51
Bonus: 87
Мнения: 2581
Мнение 18/07/2018 1:21 pm      Отговорете с цитат


anonimen написа:
Цитат:
$('#category').find('a').trigger('click');

тук пише #category, докато в html използваш class.

Също, find('a') ще намери всички 'а' елементи. Теб ти трябва

$('a.active').trigger('click')

Т.е. да намери а-то, което има клас 'active'.


Да, прав си. Оправих го, но проблема е след това. След като страницата е заредила и първия елемент е актив. Тогава натискам на друг елемент, но не премахва актив-а от първия и се получават 2 актива.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
anonimen
Активен
Активен

Регистриран на: 11/06/2012 8:07 pm

Support: 156
Bonus: 311
Мнения: 1441
Мнение 18/07/2018 1:29 pm      Отговорете с цитат


Javascript code:
     $('li.category:first-child').removeClass('active'); 


Тук премахваш active класа от първия li.category. Но ако някой друг li е active?

Трябва ти това:

Javascript code:
$('li.category.active').removeClass('active')
$(this).addClass('active');


"li.category.active" - този li, който хем е category, хем е active. На него прилагаш .removeClass()
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
vinsbg
Редовен
Редовен

Регистриран на: 28/01/2009 2:21 pm

Support: 51
Bonus: 87
Мнения: 2581
Мнение 18/07/2018 1:34 pm      Отговорете с цитат


Да ъпдейтна, какво имам в момента

$(document).ready(function(){

  $('.category').find('a').trigger('click');

  $('li.category:first-child').addClass('active');   
   
   $(function() {      
      $('li').click(function(e) {      
   
         var $this = $(this);
         $('li.category.active').removeClass('active');
         $(this).addClass('active');

      });
   });   
});

С този код, като заредя страницата, първата категория е "актив" по дефолт. Каквото и да натисна после си се сменя съдържанието, но не се сменя актив класа.

Едит:

Когато добавя и това:

var active = 0;
for (var i = 0; i < document.links.length; i++) {
if (document.links[i].href === document.URL) {
active = i;
}
}

document.links[active].className = 'active';

Имам по 2 актив едновременно - първия елемент + който съм кликнал после
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
anonimen
Активен
Активен

Регистриран на: 11/06/2012 8:07 pm

Support: 156
Bonus: 311
Мнения: 1441
Мнение 18/07/2018 1:49 pm      Отговорете с цитат


1. Това защо ти е? - $(function() {

2. Това: $('.category').find('a').trigger('click'); както ти казах, тригерва клик на всички линкове. Ползвай $('.category а').first().trigger('click')

3. Другият код не ти трябва. Също, това: document.links[active].className = 'active'; презаписва всички класове, включително и category
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
vinsbg
Редовен
Редовен

Регистриран на: 28/01/2009 2:21 pm

Support: 51
Bonus: 87
Мнения: 2581
Мнение 18/07/2018 1:57 pm      Отговорете с цитат


Все същото.

Първата категория е activ. След клик на друга категория нищо не се променя. Стои си първата категория

$(document).ready(function(){

  $('.category a').first().trigger('click');
  $('li.category:first-child').addClass('active');          
      $('li').click(function(e) {         
         var $this = $(this);
      
         $('li.category.active').removeClass('active');
         $(this).addClass('active');
      });
});
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
anonimen
Активен
Активен

Регистриран на: 11/06/2012 8:07 pm

Support: 156
Bonus: 311
Мнения: 1441
Мнение 18/07/2018 2:04 pm      Отговорете с цитат


Мога направо да направя работещ пример в jsfiddle. Ако искаш дай и ти демо как не става, защото кодът си изглежда наред.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
vinsbg
Редовен
Редовен

Регистриран на: 28/01/2009 2:21 pm

Support: 51
Bonus: 87
Мнения: 2581
Мнение 18/07/2018 2:19 pm      Отговорете с цитат


Ето демо, което работи: http://jsfiddle.net/5pk4u9z1/9/

Не работи на страницата. Идеята е #cat_1 да се зареди по дефолт и да е актив. След това вече, каквото и да се натисне да махне актива от #cat_1 и да си сменя актив елемента нормално, както на демото.

Проблема в момента е че актива си стои само на #cat_1.

Не знам дали е важно в случая, но това #cat_1 е динамично и си го получавам реално по този начин и си работи нормално.. всички категории си имат различен #cat_наме..:

$('#cat_<?php $cat['name'];?>').first().trigger('click');
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
anonimen
Активен
Активен

Регистриран на: 11/06/2012 8:07 pm

Support: 156
Bonus: 311
Мнения: 1441
Мнение 18/07/2018 2:49 pm      Отговорете с цитат


Не мисля, че id-тата имат нещо общо. Нали JSто така или иначе не ги ползва? С изключение на това - $('#cat_1').first().trigger('click'); -- което явно си работи. А тук можеш да махнеш .first() - защото $('#abc') така или иначе ще върне макс. 1 елемент.

Няма как да решим проблема без reproducible demo, или поне аз не виждам нищо. Дай outputа на php скрипта, който не работи, в лник в jsfiddle, за да елиминираме нещата едно по едно.

Не целия output, само толкова, че да се вижда, че не работи.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Покажи мнения от преди:    
Създайте нова тема   Напишете отговор    web-tourist.net Форуми -> HTML / Javascript / CSS Часовете са според зоната GMT + 2 Часа
12
Страница 1 от 2


 
Идете на:  
Не Можете да пускате нови теми
Не Можете да отговаряте на темите
Не Можете да променяте съобщенията си
Не Можете да изтривате съобщенията си
Не Можете да гласувате в анкети