Bonsoir tout le monde,
Je réalise en ce moment mon site personnel dont voici le menu principal :
<ul id="menu">
<li><a class="active" href="index.php">LA HOME</a></li>
<li><a href="profil.php">MON PROFIL</a></li>
<li><a href="contact.php">CONTACTEZ-MOI</a></li>
</ul>Ce menu est affiché via un include php afin de ne pas le répéter sur tout les pages de mon site.
Le comportement que je tente en vain d'obtenir est le suivant :
Je veux qu'a chaque clique sur un lien (par exemple ''MON PROFIL"), la classe css "active" se déplace sur le lien "MON PROFIL"
J'ai pensé qu'utiliser jQuery était la solution la plus approprié pour arriver à un résultat satisfaisant.
$("#menu a.active").click(function(){
$("#menu a.active").removeClass("active");
$(this).addClass("active");
});Cependant cela ne fonctionne pas du tout et étant à cour d'idée, je me tourne vers vous pour solliciter votre aide.
Cordialement,
Adel
Et ça:
$("#menu li a").click(function(){
$("#menu li a").removeClass("active");
$(this).addClass("active");
});Se serait plutôt:
$("#menu a").click(function(){
$("#menu a").removeClass("active");
$(this).addClass("active");
});Bonsoir djtec
La classe "active" se déplace bien sur les bouton "MON PROFIL" ou "CONTACTEZ-MOI" au moment du clic mais elle reviens aussitôt sur le bouton "LA HOME".
Adel
ça ne fonctionne pas non plus.
Je ne suis pas expert en jQuery loin de là mais ne peux-t-on pas initialiser une variable pour chaque page ?
Le problème se sont tes liens car vu que tu change de page le script repart de zéro donc essaye ceci:
var page = 'lenomdetapage'; // Genre: home, profil, contact
$("#"+page).addClass("active");
$("#menu li a").click(function(){
$("#menu li a").removeClass("active");
$(this).addClass("active");
});Et ton menu:
<ul id="menu">
<li><a id="home" href="">LA HOME</a></li>
<li><a id="profil" href="">MON PROFIL</a></li>
<li><a id="contact" href="">CONTACTEZ-MOI</a></li>
</ul>le code jQuery se trouve dans un header.php qui est lui même un include
Tu peux me donner un exemple de ta structure stp car je comprends pas trop dsl
oui voici la structure initial :
<?php
$pageencours = "index";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Adel Kamel - Portfolio</title>
<link rel="icon" type="image/png" href="img/gen/favicon.png"/>
<link href="css/gen.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="css/tweet.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="css/ui.totop.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="css/vignettes.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="css/wowslideshow.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tweet.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/btn_effect.js"></script>
<script type="text/javascript" src="js/navigation.js"></script>
<script type="text/javascript" src="js/jquery.ui.totop.js"></script>
<script type="text/javascript" src="js/jquery.quovolver.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#twitter').derniersTweets({
username: 'adel_kamel',
count: 1,
show_image: false,
set_image_size: 30
});
$('blockquote').quovolver();
var defaults = {
containerID: 'moccaUItoTop', // fading element id
containerHoverClass: 'moccaUIhover', // fading element hover class
scrollSpeed: 1200,
easingType: 'linear'
};
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
</head>
<body>
<h1><a href="index.php"><img src="img/gen/logo.jpg" alt="Adel Kamel - Portfolio" title="Mes expériences professionnelles"/></a></h1>
<div id="general">
<a href="http://fr.twitter.com/#!/adel_kamel" target="_blank" title="Suivez-moi sur Twitter"><ul id="twitter"></ul></a>
<ul id="menu">
<li><a <?php if($pageencours=="index") print "class='active'";?> href="index.php">LA HOME</a></li>
<li><a <?php if($pageencours=="profil") print "class='active'";?> href="profil.php">MON PROFIL</a></li>
<li><a <?php if($pageencours=="contact") print "class='active'";?> href="contact.php">CONTACTEZ-MOI</a></li>
</ul>Et bien il te reste plus qu'à faire une fonction qui récupère la page dans l'url puis de la transmettre à jQuery.
Pour moi cela te sert à rien la fonction jQuery car ton site n'est pas ajax donc à chaque changement de page tu recharge la page donc Php suffit.
d'accord mais je ne saurais pas écrire cette fonction dont tu parles :(
regarde sur google
J'ai copié exactement ce que tu as écris dans mon header.php cependant ça ne fonctionne pas, la classe "active" ne s'affiche même plus sue le bouton "LA HOME"
Ne met pas de jQuery pour ton menu fait le uniquement avec php
j'avoue ne plus comprendre
Je t'ai dit si ton site n'est pas en ajax jQuery te sert à rien car ton header est rechargé à chaque changement de page donc il faut que tu le fasse que en php
oui ça j'avais saisie, en faite ma question est comment faire
Comment sont tes url
comme ceci :
<ul id="menu">
<li><a class="active" href="index.php">LA HOME</a></li>
<li><a href="profil.php">MON PROFIL</a></li>
<li><a href="contact.php">CONTACTEZ-MOI</a></li>
</ul>Essaye ça:
<?php
$pageCurrent = substr(basename($_SERVER'PHP_SELF']), 0, -4);
?>
<ul>
<li><a href="#" <?php echo ($pageCurrent == 'index') ? 'class="active"' : ''; ?>>Home</a></li>
<li><a href="#" <?php echo ($pageCurrent == 'profil') ? 'class="active"' : ''; ?>>Mon profil</a></li>
<li><a href="#" <?php echo ($pageCurrent == 'contact') ? 'class="active"' : ''; ?>>Contact</a></li>
</ul>ça marche nickel je te remercie :))))
De rien bonne fin de soirée