[vinsbg]

Здравейте,

Забърках се нещо с този 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]

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

Цитат:

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]

Да, задал съм го, но без тази част пък не добавя active на друг, когато кликна и съответно не му променя цвета.

[anonimen]

Цитат:

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

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

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

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

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

[vinsbg]

anonimen написа:

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

Да, прав си. Оправих го, но проблема е след това. След като страницата е заредила и първия елемент е актив. Тогава натискам на друг елемент, но не премахва актив-а от първия и се получават 2 актива.

[anonimen]

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]

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

	$(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]

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

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

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

[vinsbg]

Все същото.

Първата категория е 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]

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

[vinsbg]

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

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

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

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

	$('#cat_<?php $cat['name'];?>').first().trigger('click');

[anonimen]

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

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

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