Махане на active от елемент

vinsbg

Registered
Здравейте,

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

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

Проблема е, че имам 2 актив класа и не мога да махна от дефолтната категория..Ето кода
HTML:
<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-то и най-вероятно е голяма бъркотия.
 
набързо ще отбележа, че от тази част няма нужда:

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

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



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

Малко по-късно ще мога да отговоря и на другия ти въпрос, ако никой още не ти е отговорил.
 
Да, задал съм го, но без тази част пък не добавя active на друг, когато кликна и съответно не му променя цвета.
 
$('#category').find('a').trigger('click');
тук пише #category, докато в html използваш class.

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

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

Т.е. да намери а-то, което има клас 'active'.
 
anonimen каза:
$('#category').find('a').trigger('click');
тук пише #category, докато в html използваш class.

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

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

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

Да, прав си. Оправих го, но проблема е след това. След като страницата е заредила и първия елемент е актив. Тогава натискам на друг елемент, но не премахва актив-а от първия и се получават 2 актива.
 
[js] $('li.category:first-child').removeClass('active');
[/js]

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

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

[js]$('li.category.active').removeClass('active')
$(this).addClass('active'); [/js]

"li.category.active" - този li, който хем е category, хем е active. На него прилагаш .removeClass()
 
Да ъпдейтна, какво имам в момента
Код:
$(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 актив едновременно - първия елемент + който съм кликнал после
 
1. Това защо ти е? - $(function() {

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

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

Първата категория е 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');
		});
});
 
Мога направо да направя работещ пример в jsfiddle. Ако искаш дай и ти демо как не става, защото кодът си изглежда наред.
 
Ето демо, което работи: http://jsfiddle.net/5pk4u9z1/9/

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

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

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

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

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

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

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

Не целия output, само толкова, че да се вижда, че не работи.

Нямам идея, защо не работи. Това е точно, както виждам категориите в view source на страницата (коментираните линкове са оригиналните)

http://jsfiddle.net/5pk4u9z1/15/

На страницата при мен обаче продължава да не работи. Стои първата категория active ( в различен цвят) дори, след като кликна върху друга :cry:
 
нее, дай това, което не работи. Вземи сорса на страницата, която ти дава php-то. Този сорс го сложи в jsfiddle, махни евентуално някви privacy неща - но е важно да Не работи, за да видим откъде идва проблемът.
 
Така: http://jsfiddle.net/5pk4u9z1/20/

Нищо друго от страницата не е нужно. В jsfiddle-a работи с останалото и без останалото.

Това, което забелязвам в сорса на страницата е, че липсва името на категорията


Код:
$('#cat_').trigger('click');

Но въпреки това ми зарежда нещата от нея..
 
vinsbg каза:
Така: http://jsfiddle.net/5pk4u9z1/20/

Нищо друго от страницата не е нужно. В jsfiddle-a работи с останалото и без останалото.

Това, което забелязвам в сорса на страницата е, че липсва името на категорията


Код:
$('#cat_').trigger('click');

Но въпреки това ми зарежда нещата от нея..

Да не би някой друг скрипт да ти прави проблем?

Пробвай да махнеш някой от заредените js библиотеки, които не ти трябват за този скрипт..

Също така понякога js бъгва от мястото на което се намира скрипта.. Пробвай да го сложиш я в хедъра, я в футъра..
 
Пробвах наясякъде да го местя - няма ефект.
Ще пробвам да махна някоя библиотека да видя какво ще стане.

Пробвах $cat[0]['name'], понеже идва от array, но явно трябва да обходя първо целия array, както е в менюто с категориите. Може би заради това дава NULL, но ми е интересно, защо въпреки това зарежда по дефолт каквото трябва.
 
Копирай сорса, върнат от php-то, в един .html файл. Пусни го в браузъра. Не работи, нали? Сега почни да махаш неща, докато продължава да не работи, и като стане досатъчно малко, дай този неработещ .html, да видим къде е проблемът.

Без php, за да не обърква нещата.
 

Горе