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:
<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>Fürs erste arbeite ich noch mit dem CSS aus meinem Testscript:
Das CSS steht in meinem externen Stylesheet.
/* 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:
<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>und das JQuery im 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(){
/* 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>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