lien javascript vers une div sur la meme page

atino · 06-03-2011 14:23:24

bonjour,

je voudrais creer des liens d'un menu vers une div sur la meme page sans recharger la page complete
je m'explique :

j'ai une div principale qui fait la page index.php ,j'ai plusieurs div (div topmenu, div menugauche et div centrale), dans la div top menu j'ai une page topmenu.php dans la div menugauche j'ai la page menugauche.php
dans la topmenu ,j'ai un menu dans une table , ---> accueil et contact, je voudrais quand je clique sur contact que la page index.php reste comme elle mais que la div principale soit changer avec les infos du lien contact

____________________________________
| |
| |
| div top menu accueil contact |
|___________________________________ |
| | |
| div | |
| menugau | |
| | |
| lien1 | DIV principale |
| lien2 | |
| | |
| | |
| | |
| | |
| | |
| | |
____________________________________

donc pour resumer quand je clique sur lien1 (par exemple) la page lien.php vienne se mettre la div principale

pouvez vous me faire le script pour le lien1 ,j'essaierai de le comprendre de le modifier pour le faire les autres liens

merci d'avance pour votre aide

Pierrot · 06-03-2011 15:00:46

Salut,
jquery+jquery ui semble être la solution ideale
si tu veux partir dans ce sens, je te met des exemples

a++

Maljuna Kris · 06-03-2011 16:29:29

Saluton,
Et avec javascript désactivé, ça va fonctionner comment ?

atino · 06-03-2011 19:35:27

pierrot, si tu peux me mettre en exemple ce que tu dis ca serait pas mal oué

maljuna si le javascript est désactivé, j'ai deja mis un code sur le menugauche (ca aggrandit reduit la police d'ecriture) que j'ai adapté pour mon menugauche; donc en local chez moi ca marche maintenant tu parles de ceux qui vont aller sur le site que je vais mettre en ligne

Pierrot · 06-03-2011 20:48:28

MK->
y a encore des dinosaures ??? :D

atino->
j'te fais çà pour demain
a++

atino · 06-03-2011 23:01:10

merci c cool , un seul lien suffira ,je ferai le reste pour comprendre la demarche

dez · 16-03-2011 03:27:16

bonjour a tous,
J'ai exactement la meme question (je crois) que Atino et j'attends la reponse de Pierrot, ou quelqu'un d'autre
Pour demain ?

la difference (si c'en est une), c'est que je veux afficher une image
et ma page n'est pas php mais html

Merci a tous

Pierrot · 16-03-2011 08:11:11

zut, j'vous ai oublié
j'monte mon portable du taf et j'vous envoie çà
a++

Pierrot · 16-03-2011 12:46:02

salut,

désolé pour le retard

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<div id="menu">

    <a id="choix1" href="#">Choix 1</a>

    <a id="choix3" href="#">Choix 2</a>

</div>

<div id="principal">

</div>

<script type="text/javascript">

    $(document).ready(function() {

        $("#choix1").click(function(e){

            e.preventDefault();

            $('#principale').empty().append($.ajax({

                url: 'choixmenu1.php',

                async: true

            }).responseText);

            return false;

        });

        $("#choix2").click(function(e){

            e.preventDefault();

            $('#principale').empty().append($.ajax({

                url: 'choixmenu2.php',

                async: true

            }).responseText);

            return false;

        });

    });

</script>

<?php// choixmenu1.php
echo"l'utilisateur a choisi le menu 'choix 1'";
?>

<?php // choixmenu2.php

    echo "l'utilisateur a choisi le menu 'choix 2'";

?>

bon, si vous avez compris, on peut optimiser

a++

atino · 16-03-2011 23:54:28

salut, je n'arrive pas à faire aller le code mais c'est peut etre à cause de la structure de mon code

dans cette page index.php, j'ai fait des includes : top_menu.php
menu.php (menu gauche)
centre.php (div principale)
footer.php

dans menu.php j'ai fait comme ca: dans un tableau

dans centre.php ,je n'ai qu'une div
<div id="principale">
</div>

donc le code javascript se met dans la page menu.php ? dans le body ou dans le head ?

et le code php, la je n'ai pas compris il se met dans centre.php ?

donc quand je clique sur "lien 1" je voudrais que la page lien_1.php se mette dans la div principale qui se trouve sur la page centre.php

ou alors s'il y a une solution plus simple, je suis preneur

met en tout cas pour ton aide

Dernière modification par atino (17-03-2011 00:06:18)

Pierrot · 17-03-2011 00:35:43

>>donc le code javascript se met dans la page menu.php ?
tu le met ou tu veux

et le code php, la je n'ai pas compris il se met dans centre.php ?
j'ai mis le nom des fichiers en commentaire

a++

atino · 17-03-2011 13:41:45

quand je fais ca, ca me met ....localhost/site/# et ca n'affiche pas la page du lien dans la div principale

Pierrot · 17-03-2011 14:08:53

montre ton code
a++

atino · 17-03-2011 14:52:47

page index.php

<!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">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>index</title>
<link rel="stylesheet" href="css/feuille.css" type="text/css" />

</head>

</div>
</body>
</html>

Menu.php

$(document).ready(function() {

$("#choix1").click(function(e){

e.preventDefault();

$('#principale').empty().append($.ajax({

url: 'choixmenu1.php',

async: true

}).responseText);

return false;

});

$("#choix2").click(function(e){

e.preventDefault();

$('#principale').empty().append($.ajax({

url: 'choixmenu2.php',

async: true

}).responseText);

return false;

});

</script>

Lien1.php

AMMA ASSIS

L'Anmma (ou amma) est une technique de massage japonais d'origine chinoise. Anmma qui signifie calmer avec les mains a été inventée en Chine sous le nom original Anmo, et adoptée par les japonais il y a plus de mille ans.

centre.php

Pierrot · 17-03-2011 14:59:10

tu as oublié çà :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

a++

Pierrot · 17-03-2011 15:03:12

tu as lu le script que je t'ai donné ????
vé essayer d'être un peu plus pédégogue :D

-----> <a id="choix1" href="#">Choix 1</a>
-----> $("#choix1").click(function(e){.....

capicho ???

a++

atino · 17-03-2011 20:39:01

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>menu</title>

<link rel="stylesheet" href="css/feuille.css" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script type="text/javascript"> 

nSpace=4   // how many space maximum between each letter

nSpeed=100 // the speed of the animation

timerRADM=null;

function LetterSpacingMenu() {

        if(document.getElementById){

        lnks = Math.floor(Math.random()*lnk.length);

        letterSpacing = Math.floor(Math.random()*nSpace);

        lnk[lnks].style.letterSpacing = letterSpacing + "px";

        timerRADM = setTimeout("LetterSpacingMenu()", nSpeed);

    }

}

function StopMenu() {

        if(document.getElementById) {

        clearTimeout(timerRADM);

        for(i=0;i<lnk.length;i++){ 

            lnk[i].style.letterSpacing = 0 + "px";

        }

    }

}

function RADMenuInit() {

        if(document.getElementById) {

        lnk = document.getElementById("menugauche").getElementsByTagName("a");

        cnt = document.getElementById("menugauche");

        cnt.style.textAlign= "center";

        cnt.onmouseover=StopMenu;

        cnt.onmouseout=LetterSpacingMenu;

        LetterSpacingMenu();

    }

}

</script>  

  </head>     

  <body  onload="RADMenuInit();">    

    <div id="menugauche">    

    <table id="table_menugauche"> 

      <tr>

        <td class="cellule" >

        </td>

      </tr>

      <tr>

        <td class="cellule">

      <a id="choix1" href="#">Choix 1</a>

          </td>

      </tr>

        <tr>

          <td class="cellule">

      <a id="choix3" href="#">Choix 2</a>

            </td>

          </tr>

          <tr>

            <td class="cellule">

      <a href="#" id="a3" class="menulinks" title="naturopathie">Naturopathie</a>      

          </td>

          </tr>

            <tr>

            <td class="cellule">

      <a href="#" id="a4" class="menulinks" title="luminotherapie">Luminotherapie</a> 

            </td>

          </tr>

          <tr>

            <td class="cellule"></td>

          </tr>

        </table>   

    </div>     

    <script type="text/javascript">

    $(document).ready(function() {

        $("#choix1").click(function(e){

            e.preventDefault();

            $('#centre').empty().append($.ajax({

                url: 'choixmenu1.php',

                async: true

            }).responseText);

            return false;

        });

        $("#choix2").click(function(e){

            e.preventDefault();

            $('#centre').empty().append($.ajax({

                url: 'choixmenu2.php',

                async: true

            }).responseText);

            return false;

        });

    });

</script>    

  </body>

</html>

j'ai créée 2 pages choix choixmenu1.php et choixmenu2.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Untitled 1</title>

</head>

<body>

<?php echo " l'utilisateur a choisi le 'menu 1'" >

</body>

</html>

il n'affiche pas "l'utilisateur a choisi...." et en bas il affiche "erreur sur la page"
je ne vois pas ou est l'erreur

désolé de mon noobisme

Pierrot · 17-03-2011 21:03:02

je crois que nu n'as pas bien compris

je me cite :

[citation]
-----> <a id="choix1" href="#">Choix 1</a>
-----> $("#choix1").click(function(e){.....
[/citation]

ensuite, le .php appelé en ajax doit retourner le strict html nécessaire au remplissage de la div,
donc aucune entête, pas de méta, pas de <html></html> pas de <body></body>

a++

Pierrot · 18-03-2011 10:05:33

salut,

explication :

creation du lien en html :

<a id="choix1" href="#">Choix 1</a>

on remarque id="choix1"
creation de la div a rafraichir en html :
<div id="centre"></div>

interception du clique sur le lien :
$("#choix1").click(function(e){}

il faut comprendre que lors du clique sur l'élément qui a l'id="Choix1" le code qui est compris entre { et } sera exécuté.
donc en les accolades il faudra mettre le code qui :
1)chargera le html
2)l'inclura entre les balise <div> et </div>

comme suis :

$("#choix1").click(function(e){
e.preventDefault();
$('#centre').empty().append($.ajax({
url: 'choixmenu1.php',
async: true
}).responseText);
return false;
});

$('#centre') va sélectionner l'élément qui a pour id "centre".
empty() va vider son contenu
append(xx) va y mettre le contenu de xx

exemple :
xx='<p bgcolor ="red">Ce contenu est en rouge</p>';
$('#centre').empty().append(xx);
résultat :
-----------------------------------------------------
| Ce contenu est en rouge |
| |
| |
| |
| |
-----------------------------------------------------
xx='<br/><p bgcolor ="green">Ce contenu est en vert</p>';
$('#centre').append(xx);
résultat :
-----------------------------------------------------
| Ce contenu est en rouge |
| Ce contenu est en vert |
| |
| |
| |
-----------------------------------------------------
notez que le .empty() n'est pas signifié, donc le contenu existant restera.

xx='<p>Nouveau contenu sans attribut</p>';
$('#centre').empty().append(xx);
résultat :
-----------------------------------------------------
| Nouveau contenu sans attribut |
| |
| |
| |
| |
-----------------------------------------------------
Cette fois-ci le .empty() vide le contenu et le .append(xx) met le contenu de la variable xx dans la div qui a l'ID = "centre"

j’espère avoir été clair
bon, si tu as compris cela, on passe a la fonction ajax

Il n'est pas question que je debug ton code
Le but est que tu comprenne le principe de fonctionnement.
je te rappel qu'a la base, un lien te suffisait

Si tu as d'autre question, je reste à ta disp

bon courage.

a++

atino · 18-03-2011 12:20:18

Pour le code, j'aurai essayé

Merci pour l'explication du script, je pense l'avoir comprise
donc le script : $("#choix1").click(function(e){
e.preventDefault();
$('#centre').empty().append($.ajax({
url: 'choixmenu1.php',
async: true
}).responseText);
return false;
});

On l'appelle sur la page (menu.php) ou il y a le menu
On lui dit d'aller sur la div "centre" par $('#centre') ,cette div "centre" n'est pas dans la page menu.php mais dans la page centre.php

les pages menu.php et centre.php sont "incluses" dans la page index.php via <?php include ("menu.php") ?> et <?php include ("centre.php") ?>

le script que tu as expliqué ne doit pas s'appeler dans la page centre.php ni index.php ?

Maljuna Kris · 18-03-2011 12:45:19

Ton problème provient du fait que tu confonds la notion de page et de script.
En fait javascript ne connait pas PHP, il ne connait que le serveur http et la page d'appel (HTML, éventuellement générée par PHP).
Pour toi, il s'agit du script PHP incluant de plus haut niveau.

Pierrot · 18-03-2011 13:06:16

Salut,
les pages menu.php et centre.php n'existent pas.
la page, c'est index.php.

et le script js, tu ne l'appel jamais
il est appelé par l'utilisateur quand il clique sur le lien.

a++

rafiki · 06-02-2014 09:20:46

Bonjour à tous et toutes et attention au déterrage de topic!

Plutôt débutant dans la conception de site, je cherche à faire la même chose qu'Atino a tenté, et j'avoue que je bloque un peu.

pour tenter de faire simple mais relativement structuré, j'ai fait un menu déroulant horizontal, avec forcément des liens qui renvoient à des pages. Sauf qu'une structure "simple" comme j'ai fait en première ébauche ne suffira pas à arriver au résultat attendu (j'aimerais implanté un historique de navigation sur ce site, et la possibilité de garder des articles en favoris).

Et je me suis donc dit (j'espère à juste titre ) que la gestion de l'historique ne navigation serait plus simple si il y a une seule et unique page, avec les différents contenus imbriqués dans celle ci.

J'en suis rendu à ce point :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Le Chocolat</title>

<link rel="stylesheet" media="screen" type="text/css" href="menu.css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    sfHover = function() {

    var sfEls = document.getElementById("menu").getElementsByTagName("LI");

    for (var i=0; i<sfEls.length; i++) {

      sfEls[i].onmouseover=function() {

        this.className+="sfhover";

      }

      sfEls[i].onmouseout=function() {

        this.className=this.className.replace(new RegExp("sfhover\\b"), "");

      }

    }

    }

    if (window.attachEvent) window.attachEvent("onload", sfHover);

#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */

{

        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */

}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */

{

        left: auto; /* Repositionnement normal */

        min-height: 0; /* Corrige un bug sous IE */

}   

</script>

</head>

<BODY>

<div style="text-align : center;">

<h1 class="centre">Le chocolat</h1>

<br />

<p style="text-indent:30px"><ul id="menu">

<li>

<a id="maya" href="#">Histoire et Origine</a>

<ul>

<li><a id="maya" href="#">Epoque Maya</a></li>

<li><a id="azteque" href="Azteque.html">Epoque Aztèque</a></li>

<li><a id="1494" href="1494.html">1494 - 1662</a></li>

<li><a id="1700" href="1700.html">1700 - 1950</a></li>

</ul>

</li>

<li>

<a id="fabrication" href="Fabrication.html">Techniques de Fabrication</a>

<ul>

<a id="fabrication" href="Fabrication.html">Fabrication</a>

<li><a id="ecabossage" href="Ecabossage.html">Les étapes</a>

<ul>

<li><a id="ecabossage" href="Ecabossage.html">Ecabossage, fermentation et séchage</a></li>

<li><a id="torrefaction" href="Torrefaction.html">Torréfaction, concassage et broyage</a></li>

<li><a id="ajout" href="Ajout.html">Ajout d'ingrédients et conchage</a></li>

<li><a id="moulage" href="Moulage.html">Tempérage et Moulage</a></li>

</ul></li>

<li><a id="blanchiment" href="Blanchiment.html">Blanchiment du chocolat</a></li>

</ul>

</li>

<li>

<a id="type" href="Type.html">Formes et Types de Chocolat</a>

<ul>

<li><a id="type" href="Type.html">Types de chocolat</a></li>

<li><a id="appelation" href="Appelation.html">Appélations spécifiques</a></li>

<li><a id="crus" href="Crus.html">Principaux crus de cacao</a></li>

<li><a id="formes" href="Formes.html">Différentes formes</a></li>

</ul>

<li><a id="degustation" href="Degustation.html">Consommation</a>

<ul>

<li><a id="degustation" href="Degustation.html">Dégustation</a></li>

<li><a id="consommation" href="Consommation.html">Consommation mondiale</a></li>

</ul></li>

</li>

<li>

<a id="effets" href="Effets.html">Santé</a>

<ul>

<li><a id="effets" href="Effets.html">Préambule</a></li>

<li><a id="circulatoire" href="Circulatoire.html">Effets prouvés</a>

<ul>

<li><a id="circulatoire" href="Circulatoire.html">Système circulatoire</a></li>

<li><a id="metaux" href="Metaux.html">Métaux lourds</a></li>

<li><a id="obesite" href="Obesite.html">Risques d'obésité</a></li>

<li><a id="psycho" href="Psycho.html">Psychostimulation</a></li>

<li><a id="benefices" href="Benefices.html">Autres bénéfices</a></li>

</ul></li>

<li><a id="aphrodisiaque" href="Aphrodisiaque.html">Effets non prouvés</a>

<ul>

<li><a id="aphrodisiaque" href="Aphrodisiaque.html">Aphrodisiaque</a></li>

<li><a id="acne" href="Acne.html">Acné</a></li>

<li><a id="addiction" href="Addiction.html">Addictions</a></li>

</ul></li>

<li><a id="animaux" href="Animaux.html">Chez les animaux</a></li>

</ul>

</li>

</ul>

<br />

<br />

</p>

</div>

<div id="principal">

</div>

<script type="text/javascript">

  $(document).ready(function() {

        $("#maya").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'maya.php',

                async: true

            }).responseText);

            return false;

        });

            $("#azteque").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'azteque.php',

                async: true

            }).responseText);

            return false;

        });

            $("#1494").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: '1494.php',

                async: true

            }).responseText);

            return false;

        });

            $("#1700").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: '1700.php',

                async: true

            }).responseText);

            return false;

        });

            $("#fabrication").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'fabrication.php',

                async: true

            }).responseText);

            return false;

        });

            $("#ecabossage").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'ecabossage.php',

                async: true

            }).responseText);

            return false;

        });

            $("#torrefaction").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'torrefaction.php',

                async: true

            }).responseText);

            return false;

        });

            $("#ajout").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'ajout.php',

                async: true

            }).responseText);

            return false;

        });

            $("#moulage").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'moulage.php',

                async: true

            }).responseText);

            return false;

        });

            $("#blanchiment").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'blanchiment.php',

                async: true

            }).responseText);

            return false;

        });

            $("#type").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'type.php',

                async: true

            }).responseText);

            return false;

        });

            $("#appelation").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'appelation.php',

                async: true

            }).responseText);

            return false;

        });

            $("#crus").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'crus.php',

                async: true

            }).responseText);

            return false;

        });

            $("#formes").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'formes.php',

                async: true

            }).responseText);

            return false;

        });

            $("#degustation").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'degustation.php',

                async: true

            }).responseText);

            return false;

        });

            $("#consommation").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'consommation.php',

                async: true

            }).responseText);

            return false;

        });

            $("#effets").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'effets.php',

                async: true

            }).responseText);

            return false;

        });

            $("#circulatoire").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'circulatoire.php',

                async: true

            }).responseText);

            return false;

        });

            $("#metaux").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'metaux.php',

                async: true

            }).responseText);

            return false;

        });

            $("#obesite").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'obesite.php',

                async: true

            }).responseText);

            return false;

        });

            $("#psycho").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'psycho.php',

                async: true

            }).responseText);

            return false;

        });

            $("#benefices").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'benefices.php',

                async: true

            }).responseText);

            return false;

        });

            $("#aphrodisiaque").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'aphrodisiaque.php',

                async: true

            }).responseText);

            return false;

        });

            $("#acne").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'acne.php',

                async: true

            }).responseText);

            return false;

        });

            $("#addiction").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'addiction.php',

                async: true

            }).responseText);

            return false;

        });

            $("#animaux").click(function(e){

            e.preventDefault();

            $('#principal').empty().append($.ajax({

                url: 'animaux.php',

                async: true

            }).responseText);

            return false;

        });

  });

</script>

</body>

</html>

Explications :

dans le premier encadré : le haut de mon index.php, avec les différents scripts (pour mon menu, pour jquery entre autres), et la feuille de style.

dans le deuxième encadré : la liste dont je me sers pour mon menu. Avec comme seule entrée modifiée correctement (c'est mon test pour voir si ça fonctionne, et en l'occurence, non) :

<li><a id="maya" href="#">Epoque Maya</a></li>

Et enfin le troisième encadré avec le script sensé renvoyé le lien de la liste dans la div "principal".

Du coup, j'aimerais si possible solliciter votre aide pour m'aider à comprendre ce que j'oublie, ou ce que je fais mal, parce qu'en bon "autodidacte", j'avoue avoir quelques difficultés.

Je reste à votre disposition, et vous remercie dans tous les cas, ne serait-ce que pour l'aide qu'a pu me procurer la lecture de quelques topics de ce forum!

Lucas

Jc · 08-02-2014 15:37:28

Bonjour

@Atino

1)

if(document.getElementById){...

Ce code va générer une erreur, car il faut préciser quel ID d'élément on veut tester l'existence : ex: if (document.getElementById('MaDiv')){....
2)

lnk = document.getElementById("menugauche").getElementsByTagName("a");

Ce code ne veut rien dire. En effet si on recherche un élément par son ID, étant unique, inutile d'aller rechercher une balise <a> qui elle ne l'est pas. Autant mettre une ID en attribut de la balise <a> ciblée cela sera plus performant et plus simple.
3) Si l'on souhaite appeler une fonction ajax à partir d'un lien, personnellement je déconseille d'utiliser une balise <a> avec un href="#", le lien hypertexte étant toujours prioritaire sur l'appel javascript et pouvant générer des effets de bords selon le navigateur utilisé (et évite un traitement supplémentaire jquery avec un e.preventDefault partout dans le code). Je conseille plutôt de passer par un <span>, une <div> ou un titre <h4> (en respectant la hierarchie des titres en conséquence pour le référencement SEO) avec sur lequel on rajoutera en style CSS un cursor:pointer pour montrer que l'élément est cliquable et dans lequel on ajoutera un event onclick pointant vers la fonction js, réservant ainsi les events au niveau jquery à la mécanique applicative de l'interface. Avec un span cela donnerait : <span id="choix1" style="cursor:pointer" onclick="appel_ajax()">Choix 1</span>. Ensuite du côté javascript au lieu de passer par une fonction anonyme on écrit : function appel_ajax(){ ... }

++

Dernière modification par Jc (08-02-2014 15:38:22)

PHP|Débutant :: Forums

Advertisement

#1 06-03-2011 14:23:24

lien javascript vers une div sur la meme page

#2 06-03-2011 15:00:46

Re : lien javascript vers une div sur la meme page

#3 06-03-2011 16:29:29

Re : lien javascript vers une div sur la meme page

#4 06-03-2011 19:35:27

Re : lien javascript vers une div sur la meme page

#5 06-03-2011 20:48:28

Re : lien javascript vers une div sur la meme page

#6 06-03-2011 23:01:10

Re : lien javascript vers une div sur la meme page

#7 16-03-2011 03:27:16

Re : lien javascript vers une div sur la meme page

#8 16-03-2011 08:11:11

Re : lien javascript vers une div sur la meme page

#9 16-03-2011 12:46:02

Re : lien javascript vers une div sur la meme page

#10 16-03-2011 23:54:28

Re : lien javascript vers une div sur la meme page

#11 17-03-2011 00:35:43

Re : lien javascript vers une div sur la meme page

#12 17-03-2011 13:41:45

Re : lien javascript vers une div sur la meme page

#13 17-03-2011 14:08:53

Re : lien javascript vers une div sur la meme page

#14 17-03-2011 14:52:47

Re : lien javascript vers une div sur la meme page

#15 17-03-2011 14:59:10

Re : lien javascript vers une div sur la meme page

#16 17-03-2011 15:03:12

Re : lien javascript vers une div sur la meme page

#17 17-03-2011 20:39:01

Re : lien javascript vers une div sur la meme page

#18 17-03-2011 21:03:02

Re : lien javascript vers une div sur la meme page

#19 18-03-2011 10:05:33

Re : lien javascript vers une div sur la meme page

#20 18-03-2011 12:20:18

Re : lien javascript vers une div sur la meme page

#21 18-03-2011 12:45:19

Re : lien javascript vers une div sur la meme page

#22 18-03-2011 13:06:16

Re : lien javascript vers une div sur la meme page

#23 06-02-2014 09:20:46

Re : lien javascript vers une div sur la meme page

#24 08-02-2014 15:37:28

Re : lien javascript vers une div sur la meme page

Pied de page des forums