add/remove class für Ankerlinks: benötige Hilfe beim Einbauen in ein jQuery-Script

celidee

Liebe Gemeinde,
ich habe ein funktionierendes JQUERY-Script bei dem die Klassen der Links geadded und removed werden gebastelt
Dieses Script möchte ich nun in ein bestehendes JQuery-script im Header meines WordPress-Themes einbauen. Und da ich bezügl. JQuery ziemlich wackelig bin, bitte ich hier um Hilfe.

Hier mein 'nacktes' script für die Navigation:

HTML

<head>


<style type="text/css">
.menu li a {background: blue;}
.menu li a.hover  {background: red;}
.menu li a.active {background: green;}
</style>




</head>
<body>


<ul class="menu">
 <li>
   <a href="#punkt1" class="active">Punkt 1</a>
 </li>
 <li>
   <a href="#punkt2">Punkt 2</a>
 </li>
 <li>
   <a href="#punkt3">Punkt 3</a>
 </li>
 <li>
   <a href="#punkt4">Punkt 4</a>
 </li>
</ul>


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(".menu li a").hover(function() {
 $(this).addClass("hover");
}, function() {
 $(this).removeClass("hover");
});


$(".menu li a").click(function() {
 $(".menu a.active").removeClass("active");
 $(this).addClass("active").blur();
});
</script>




</body>

Alles anzeigen

Fürs erste arbeite ich noch mit dem CSS aus meinem Testscript:
Das CSS steht in meinem externen Stylesheet.

HTML

/* navi links*/
.cate_list li a {background: yellow;}
.cate_list li a.hover {background: red;}
.cate_list li a.active {background: green;}

So sieht die Navigation meines Themes aus:

PHP

<ul class="cate_list">
            
<?php //list_tags(); ?> 


<li><a href="#all" class="all active">Start</a>
<!-- den Startlink habe ich auf 'active' gesetzt  -->
</li> 
      
              <?php 
              $categories=  get_categories('title_li'); 
              foreach ($categories as $category) 
              {
                $option = '<li><a href="#'.$category->category_nicename.'" class="'.$category->category_nicename.'">';
                $option .= $category->cat_name;
                $option .= '</a></li>';
                echo $option;
              }
             ?>


           
            </ul>

Alles anzeigen

und das JQuery im Header:

PHP

<script src="<?php bloginfo('template_url'); ?>/js/jquery.tools.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.infinitescroll.min.js" type="text/javascript"></script>


<script type="text/javascript">
	$(document).ready(function(){
     


/* filtering the Boxes - hover Zustand*/
		
		$(".cate_list li a").hover(function() {
 		$(this).addClass("hover");
		}, function() {
	        $(this).removeClass("hover");
			});




/* filtering the Boxes - click Zustand*/


		$('.cate_list li a').click(function(){
                $(".cate_list a.active").removeClass("active");
                $(this).addClass("active").blur();
                 
/* filtering the Boxes - funktion*/
 		
		  var colorClass = '.' + $(this).attr('class');
		
		  if(colorClass=='.all') {
			// show all hidden boxes
			$wall.children('.invis')
			  .toggleClass('invis').fadeIn(speed);
		  } else {  
			// hide visible boxes 
			$wall.children().not(colorClass).not('.invis')
			  .toggleClass('invis').fadeOut(speed);
			// show hidden boxes
			$wall.children(colorClass+'.invis')
			  .toggleClass('invis').fadeIn(speed);
		  }
		  $wall.masonry();
		  return false;
		});
/* End Filtering the Boxes */
		


</script>

Alles anzeigen

Hover und Click-Funktion sind ok, aber die Funktion 'filtering the boxes' klappt nicht mehr - die Elemente werden beim Click alle ausgeblendet.
Das Ergebnis kann man sich auch hier ansehen: http://www.linienf%c3%bchrung.net
Wer kann mir helfen?

Danke und viele Grüße
Celidee

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

celidee

Guten Morgen,
ich bin nun schon ein ganzes Stück weitergekommen.
Das script funktioniert immerhin schon teilweise:

So sieht der Code nun im Header aus:

Teil 1:

Code

/* Navilinks - hover Zustand - funktioniert*/
		
		$(".cate_list li a").hover(function() {
 		$(this).addClass("hover");
		}, function() {
	        $(this).removeClass("hover");
			});
		
/* Navilinks - click Zustand - funktioniert*/


		$('.cate_list li a').click(function(){
                $(".cate_list a.active").removeClass("active");
                $(this).addClass("active");
                 
/* Navilink 'Start' dh. alle Elemente einblenden - funktioniert*/
 		
		  var colorClass = '.' + $(this).attr('class');
		  if($(this).hasClass("all")){
			// show all hidden boxes
			$wall.children('.invis')
			  .toggleClass('invis').fadeIn(speed);
		  } else {

Alles anzeigen

Hier der dazugehörige Codeschnipsel aus der Navi

PHP

<a href="#all" class="all active">Start</a>

Teil 2

Code

/* filtering the Boxes - Navilinks '$category' dh. Elemente filtern - funktioniert noch nicht*/


....else {  


   // Test für die Kategorie mode-fashion
    if($(this).hasClass("mode-fashion")){
	alert("mode-fashion");}


			// hide visible boxes 
			$wall.children().not(colorClass).not('.invis')
			  .toggleClass('invis').fadeOut(speed);
			// show hidden boxes
			$wall.children(colorClass+'.invis')
			  .toggleClass('invis').fadeIn(speed);
		  }
		  $wall.masonry();
		
		  return false;
		});

Alles anzeigen

hier der dazugehörige Schnipsel aus der Navi:

PHP

$option = '<li><a href="#'.$category->category_nicename.'" class="'.$category->category_nicename.'">'

Die else-Anweisung möchte, dass die Elemente entsprechend der jeweiligen Kategorie, z.B. mode-fashion 'gefiltert' d.h. ein/ausgeblendet werden. class="'.$category->category_nicename.'" soll als Klasse für die jeweilige Kategorie übergeben werden, was auch funktioniert.

Hat jemand eine Idee, wo bei Teil 2 der Knackpunkt liegt?

celidee

...wirklich niemand ne Idee? :oops:

Willkommen! Melden Sie sich an oder registrieren Sie sich.

add/remove class für Ankerlinks: benötige Hilfe beim Einbauen in ein jQuery-Script

Jetzt mitmachen!