# aktive Anker-Links markieren mit Javascript (Wordpress)



## celiadee (21. April 2012)

Liebes JS-Forum,

bei meinem Wordpress-Blog befinden sich alle Inhalte (Artikel) auf einer Seite.
Die Kategorien sortiert man mit einer Navigation aus Anker-Links (dynamisch).

Das sieht dann so aus: link zum projekt

Hier der Code der Navigation: 

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


<li><a class="all" href="#all">linienf&uuml;hrung</a>
</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;
			  }
			 ?>
```

Ich möchte den aktiven Zustand andersfarbig markieren, dafür habe ich folgende Javascript-
Funktion gefunden: von Maik 08/2010


```
<script language="JavaScript" type="text/javascript">	
		
			<!--	
function aktivieren(strHref)
{
    if(document.getElementById)
        {
            for(i=0;i<document.links.length;++i)
                {
                    if(String(document.links[i].className).match(/^(nav|clicked)$/))
                        {
                            document.links[i].className=(document.links[i].href==strHref)?'clicked':'nav';
                        }
                }
        }
}
	
				-->	
	
		
		</script>
```

der link dazu sieht dann so aus:

```
<li><a href="#anker1" class="nav" onclick="aktivieren(this.href)">Anker 1</a>
    <li><a href="#anker2" class="nav" onclick="aktivieren(this.href)">Anker 2</a></li>
    <li><a href="#anker3" class="nav" onclick="aktivieren(this.href)">Anker 3</a></li>
</li>
```

und das CSS:

```
<style type="text/css">
.navi a.nav{
        -webkit-transition:color .2s ease-out;
        color: red;
}
.navi a.nav:hover, .navi a.clicked{
        color: blue;
}


		</style>
```

das funktioniert auch wunderbar!
Aber wie kann ich die Funktion in den Links einbinden, da 'class' ja jeweils schon anderweitig belegt ist?


```
<a class="all" href="#all">linienf&uuml;hrung</a>
<a href="#'.$category->category_nicename.'" class="'.$category->category_nicename.'">'
```

Ist das übrhaupt zu realisieren?
Wenn ja, wie? Hat jemand eine Idee?

Lieben Dank und viele Grüße
Celiadee


----------



## SpiceLab (21. April 2012)

celiadee hat gesagt.:


> Aber wie kann ich die Funktion in den Links einbinden, da 'class' ja jeweils schon anderweitig belegt ist?


Das *class*-Attribut kann/darf auch mehrere Klassennamen - getrennt durch Leerzeichen - enthalten. 


```
<a href="..." class="imagebekleidung-corporate-fashion nav" onclick="aktivieren(this.href)">
```
bzw.

```
<a href="..." class="'.$category->category_nicename.' nav" onclick="aktivieren(this.href)">
```

Oder hab ich dein Anliegen mißverstanden?


----------



## celiadee (22. April 2012)

moin spicelab,
das funktioniert leider nicht. habe es ausprobiert. 
das sind auch keine "einfachen" css klssen, sondern die stehen mit javascript-funktionen in verbindung.
An <a class="all" href="#all">linienf&uuml;hrung</a> class = "all" hängt z.B. ein Javascript im Header:



```
/* filtering the Boxes */
		$('.cate_list li a').click(function(){
		
		  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 */
```


Grüße, celidee


----------



## SpiceLab (22. April 2012)

Im Falle dieses jQuery-Scripts bietet sich doch eine entsprechende Funktionserweiterung an, um das CSS (=Klasse oder Eigenschaftswert/e) des geklickten Objekts (=Link) zu tauschen, womit die zusätzliche "_gesucht & gefundene_" JS-Funktion obsolet ist.


----------



## celiadee (22. April 2012)

Hi Spicelab, erstmal, danke für Deine Antwort.

Die Funktionserweiterung liegt natürlich nahe. Weisst Du denn, wie das geht?
Die jqueries sind plugins, deren Code meinen Horizont leider weit überschreiten. So weiss ich nicht, an welchen Stellen in den Scripts ich die Funktion ergänzen müsste.

Ich poste mal das vollständige Javascript in meinem Header:


```
<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(){

		$(".box a").each(function(i){
			i=i+1;
			$(this).hover(function(){
			var $box_height = $(this).find("img").height();
			var $var_padding = $box_height/2;		  
			$(".blog_info").css({"padding-top":$var_padding-8 ,"padding-bottom":$var_padding-8})			   
			});			
		});		

		
				var
				speed = 1000,  // animation speed
				$wall = $('#wrap');
			 

		
		/* filtering the Boxes */
		$('.cate_list li a').click(function(){
		
		  var colorClass = '.' + $(this).attr('class');
		
		  if(colorClass=='.alle') {
			// 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 */
		
		
		/* Loader */
	

		$wall.masonry({ 
		  columnWidth: 20, 
		  itemSelector: '.box:not(.invis)',
		  animate: true,
			animationOptions: {
			  duration: 650,
			  easing: 'linear',
			  queue: true
			}
		});
		$wall.infinitescroll({
		  navSelector  : '',  // selector for the paged navigation 
		  nextSelector : '',  // selector for the NEXT link (to page 2)
		  itemSelector : '.box',     // selector for all items you'll retrieve
		  loadingImg : 'images/loader.gif',
		  donetext  : '',
		  debug: false,
		  errorCallback: function() { 
			// fade out the error message after 2 seconds
			$('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   
		  }
		  },
		  // call masonry as a callback
		  function( newElements ) {
		  setTimeout(function() {
			$wall.masonry({ appendedContent: $(newElements) });
		  }, 1000);
		}
		);
		
	});

</script>
```

'jquery.infinitescroll.min.js' ist das Plugin für die Sortier-Funktion der Links,
'masonry' macht die Animation.


Ich habe im Netz diese Demo gefunden: http://development.shiftedwork.de/pagescroll/#stuff

Hier steht die Funktion für das Austauschen der Klassen nur in den ausgelagerten JS, kann das also nicht so recht auf meinen Fall übertragen. 

Oder weiss sonst noch jemand Rat?

Danke & Viele Grüße
Celiadee


----------



## SpiceLab (22. April 2012)

Schau dir hierzu unter CSS - jQuery API mal etwas näher .css() und .toggleClass() an


----------



## celiadee (22. April 2012)

Danke für den Tipp, spicelab, werde ich machen.
Meinst Du denn, es ist ausreichend, die Funktionserweiterung im Head zu ergänzen, oder muss da auch noch etwas in die ausgelagern JS?


----------



## SpiceLab (22. April 2012)

*.click(function () {...})* in _/* filtering the Boxes */_ ist der Arbeitsort


----------



## celiadee (22. April 2012)

danke spicelab, schaue ich mir mal an!

Also:
versuche mich im Kleinen erstmal an der 'toggle' Funktion.

Dabei klappt dieses hier:


```
<style type="text/css">


.black {color: black;}
.blue {color: blue;}


		</style>

		
<script src="http://code.jquery.com/jquery-latest.js"></script>		
        

		
	</head>
	<body>
 
    
    
<ul>
<li><a href="#" id="a1" class="black">eins</a></li>
<li><a href="#" id="a2"  class="black">zwei</a></li>
<li><a href="#" id="a3"  class="black">drei</a></li>
<li><a href="#" id="a4" class="black">vier</a></li>
</ul>

<script>

$("a").click(function(){
$(this).toggleClass("blue black");
});	

</script>    
    
    
</body>
```

beim Klicken wird die Linkfarbe von Black auf Blue geändert, allerdings bleibt sie dann auch so und ändert sich beim zweiten Mal Klicken wieder von Blue auf Black. Nicht 100% das was ich möchte.


Probiere daher mit der Funktion adOrRemove was leider nicht funktioniert.


```
<style type="text/css">

.black {color: black;}
.blue {color: blue;}


		</style>

		
<script src="http://code.jquery.com/jquery-latest.js"></script>		
        

		
	</head>
	<body>
 
    
    
<ul>
<li><a href="#" id="a1" class="black">eins</a></li>
<li><a href="#" id="a2"  class="black">zwei</a></li>
<li><a href="#" id="a3"  class="black">drei</a></li>
<li><a href="#" id="a4" class="black">vier</a></li>
</ul>

<script>
$("a").click(function(){
if (addOrRemove) {
    $(this).addClass("blue");
  }
  else {
    $(this).removeClass("black");
  }

});	</script>    
    
    
    
</body>
```

Sind da irgendwelche Denk/Code Fehler?


----------



## Maniac (23. April 2012)

Wo ist deine Variable "addOrRemove" definiert? somit ist es immer false.


----------



## celiadee (23. April 2012)

Hallo Maniac,

meines Erachtens wird "addOrRemove" bei jquery "im Hintergrund " definiert:
<script src="http://code.jquery.com/jquery-latest.js"></script>	

Oder täusche ich mich da?

Liebe Gemeinde,
ich habe es endlich geschafft, mir mit jQuery die gewünschte Navigation zu basteln.
Hier der Code:


```
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
		
<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>

$(".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>
```

Jetzt habe ich nur ein Problem: Das script funktioniert nur dann, wenn es im <body> steht.
Wenn es im <head> steht, passiert nix. Was zum Teufel ist denn da schon wieder los?
Weiss jemand Rat ?

hat sich erledigt: da muss document ready finction drumherum:

```
$(document).ready(function(){
$(".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();
});
```

});


----------



## celiadee (25. April 2012)

*aktive Ankerlinks markieren / Funktionserweiterung eines  JQuery Plugins*

Liebe Gemeinde,
mein Beitrag wurde geschlossen, dabei bin ich noch nicht ganz fertig mit dieser unerwartet kniffligen Geschichte. Ich habe noch ein kleines Problem mit dem Einbauen meines scriptes:

So sieht der Code im Header aus:

Teil 1:

```
/* 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 {
```
Hier der dazugehörige Codeschnipsel aus der Navi 
	
	
	



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


Teil 2

```
/* 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;
		});
```

hier der dazugehörige Schnipsel aus der Navi:

```
$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?


----------



## sheel (25. April 2012)

Hier ist nichts geschlossen.
Ich hab den Beitrag verschoben.

PS: Bitte kein Pushen.
Siehe Netiquette.


----------

