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

User avatar
vinsbg
Гуру
Гуру
Posts: 2604
Joined: Wed Jan 28, 2009 12:21 pm
Answers: 51
Location: София
Contact:

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

Post by vinsbg » Wed Jul 18, 2018 10:32 am

Здравейте,

Забърках се нещо с този 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>
[/html]
А това ми е JS-то. 2 различни части е:

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

Code: Select all

  var active = 0;
	for &#40;var i = 0; i < document.links.length; i++&#41; &#123;
		if &#40;document.links&#91;i&#93;.href === document.URL&#41; &#123;
			active = i;
		&#125;
	&#125;

	document.links&#91;active&#93;.className = 'active';
  
  $&#40;'#category'&#41;.find&#40;'a'&#41;.trigger&#40;'click'&#41;;
  
  $&#40;'li.category&#58;first-child'&#41;.addClass&#40;'active'&#41;;  
  $&#40;'li.category'&#41;.click&#40;function&#40;&#41;&#123;
	  $&#40;'li.category&#58;first-child'&#41;.removeClass&#40;'active'&#41;; 
	  $&#40;this&#41;.addClass&#40;'active'&#41;;
  &#125;&#41;; 
Искам да кажа, че хич ме няма в JS-то и най-вероятно е голяма бъркотия.

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1573
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Wed Jul 18, 2018 11:12 am

набързо ще отбележа, че от тази част няма нужда:
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 класа по подразбиране?

Малко по-късно ще мога да отговоря и на другия ти въпрос, ако никой още не ти е отговорил.

User avatar
vinsbg
Гуру
Гуру
Posts: 2604
Joined: Wed Jan 28, 2009 12:21 pm
Answers: 51
Location: София
Contact:

Post by vinsbg » Wed Jul 18, 2018 11:14 am

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

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1573
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Wed Jul 18, 2018 11:18 am

$('#category').find('a').trigger('click');
тук пише #category, докато в html използваш class.

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

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

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

User avatar
vinsbg
Гуру
Гуру
Posts: 2604
Joined: Wed Jan 28, 2009 12:21 pm
Answers: 51
Location: София
Contact:

Post by vinsbg » Wed Jul 18, 2018 11:21 am

anonimen wrote:
$('#category').find('a').trigger('click');
тук пише #category, докато в html използваш class.

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

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

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

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1573
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Wed Jul 18, 2018 11:29 am

[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()

User avatar
vinsbg
Гуру
Гуру
Posts: 2604
Joined: Wed Jan 28, 2009 12:21 pm
Answers: 51
Location: София
Contact:

Post by vinsbg » Wed Jul 18, 2018 11:34 am

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

Code: Select all

$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;

  $&#40;'.category'&#41;.find&#40;'a'&#41;.trigger&#40;'click'&#41;;

  $&#40;'li.category&#58;first-child'&#41;.addClass&#40;'active'&#41;;    
	
	$&#40;function&#40;&#41; &#123;		
		$&#40;'li'&#41;.click&#40;function&#40;e&#41; &#123;		
	
			var $this = $&#40;this&#41;;
			$&#40;'li.category.active'&#41;.removeClass&#40;'active'&#41;;
			$&#40;this&#41;.addClass&#40;'active'&#41;;

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

Едит:

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

Code: Select all

var active = 0;
for &#40;var i = 0; i < document.links.length; i++&#41; &#123;
if &#40;document.links&#91;i&#93;.href === document.URL&#41; &#123;
active = i;
&#125;
&#125;

document.links&#91;active&#93;.className = 'active';
Имам по 2 актив едновременно - първия елемент + който съм кликнал после

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1573
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Wed Jul 18, 2018 11:49 am

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

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

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

User avatar
vinsbg
Гуру
Гуру
Posts: 2604
Joined: Wed Jan 28, 2009 12:21 pm
Answers: 51
Location: София
Contact:

Post by vinsbg » Wed Jul 18, 2018 11:57 am

Все същото.

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

Code: Select all

$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;

  $&#40;'.category a'&#41;.first&#40;&#41;.trigger&#40;'click'&#41;;
  $&#40;'li.category&#58;first-child'&#41;.addClass&#40;'active'&#41;;    		
		$&#40;'li'&#41;.click&#40;function&#40;e&#41; &#123;			
			var $this = $&#40;this&#41;;
		
			$&#40;'li.category.active'&#41;.removeClass&#40;'active'&#41;;
			$&#40;this&#41;.addClass&#40;'active'&#41;;
		&#125;&#41;;
&#125;&#41;;

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1573
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
Location: Parse error: unexpected "}" in /home/index.php on line 26

Post by anonimen » Wed Jul 18, 2018 12:04 pm

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

Post Reply