|
Автор |
Съобщение |
Редовен
Регистриран на: 28/01/2009 2:21 pm
Support:
Bonus: 87
Мнения: 2603
|
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-то и най-вероятно е голяма бъркотия. |
|
Върнете се в началото |
|
|
Активен
Регистриран на: 11/06/2012 8:07 pm
Support:
Bonus: 321
Мнения: 1512
|
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 класа по подразбиране?
Малко по-късно ще мога да отговоря и на другия ти въпрос, ако никой още не ти е отговорил. |
|
Върнете се в началото |
|
|
Редовен
Регистриран на: 28/01/2009 2:21 pm
Support:
Bonus: 87
Мнения: 2603
|
18/07/2018 1:14 pm
|
|
|
Да, задал съм го, но без тази част пък не добавя active на друг, когато кликна и съответно не му променя цвета.
|
|
Върнете се в началото |
|
|
Активен
Регистриран на: 11/06/2012 8:07 pm
Support:
Bonus: 321
Мнения: 1512
|
18/07/2018 1:18 pm
|
|
|
Цитат: | $('#category').find('a').trigger('click');
|
тук пише #category, докато в html използваш class.
Също, find('a') ще намери всички 'а' елементи. Теб ти трябва
$('a.active').trigger('click')
Т.е. да намери а-то, което има клас 'active'. |
|
Върнете се в началото |
|
|
Редовен
Регистриран на: 28/01/2009 2:21 pm
Support:
Bonus: 87
Мнения: 2603
|
18/07/2018 1:21 pm
|
|
|
anonimen написа: | Цитат: | $('#category').find('a').trigger('click');
|
тук пише #category, докато в html използваш class.
Също, find('a') ще намери всички 'а' елементи. Теб ти трябва
$('a.active').trigger('click')
Т.е. да намери а-то, което има клас 'active'. |
Да, прав си. Оправих го, но проблема е след това. След като страницата е заредила и първия елемент е актив. Тогава натискам на друг елемент, но не премахва актив-а от първия и се получават 2 актива. |
|
Върнете се в началото |
|
|
Активен
Регистриран на: 11/06/2012 8:07 pm
Support:
Bonus: 321
Мнения: 1512
|
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() |
|
Върнете се в началото |
|
|
Редовен
Регистриран на: 28/01/2009 2:21 pm
Support:
Bonus: 87
Мнения: 2603
|
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 актив едновременно - първия елемент + който съм кликнал после |
|
Върнете се в началото |
|
|
Активен
Регистриран на: 11/06/2012 8:07 pm
Support:
Bonus: 321
Мнения: 1512
|
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
|
|
Върнете се в началото |
|
|
Редовен
Регистриран на: 28/01/2009 2:21 pm
Support:
Bonus: 87
Мнения: 2603
|
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'); }); });
| | |
|
|
Върнете се в началото |
|
|
Активен
Регистриран на: 11/06/2012 8:07 pm
Support:
Bonus: 321
Мнения: 1512
|
18/07/2018 2:04 pm
|
|
|
Мога направо да направя работещ пример в jsfiddle. Ако искаш дай и ти демо как не става, защото кодът си изглежда наред.
|
|
Върнете се в началото |
|
|
Редовен
Регистриран на: 28/01/2009 2:21 pm
Support:
Bonus: 87
Мнения: 2603
|
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'); | | |
|
|
Върнете се в началото |
|
|
Активен
Регистриран на: 11/06/2012 8:07 pm
Support:
Bonus: 321
Мнения: 1512
|
18/07/2018 2:49 pm
|
|
|
Не мисля, че id-тата имат нещо общо. Нали JSто така или иначе не ги ползва? С изключение на това - $('#cat_1').first().trigger('click'); -- което явно си работи. А тук можеш да махнеш .first() - защото $('#abc') така или иначе ще върне макс. 1 елемент.
Няма как да решим проблема без reproducible demo, или поне аз не виждам нищо. Дай outputа на php скрипта, който не работи, в лник в jsfiddle, за да елиминираме нещата едно по едно.
Не целия output, само толкова, че да се вижда, че не работи.
|
|
Върнете се в началото |
|
|
|