aktive Anker-Links markieren mit Javascript (Wordpress)

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:

HTML: 
<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:
Javascript: 
$(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();
});

});
 
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:
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 {
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;
		});

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?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück