navigatieknoppen over verschillende div

Status
Niet open voor verdere reacties.
J

janbe63

Gebruiker
Lid geworden
21 okt 2007
Berichten
64
Beste

Graag wil ik een pagina maken bestaande uit verschillende div-jes.

In de 1e div staan 2 knoppen, bij aanklikken van knop 1 verandert de inhoud van de 2e div (van inhoud A naar inhoud B), bij aanklikken van knop 2 verandert de inhoud van de 3e div (van inhoud C naar inhoud D).
in div 2 met inhoud A staat een knop welke de inhoud van div 3 verandert in inhoud D, maar met inhoud B een knop die div 3 verandert in inhoud C.
In div 3 met inhoud D staat een knop die de inhoud van div 4 verandert (zelfde php bladzijde maar met andere gebruiker=).

Dit is maar een voorbeeld van de opbouw, waar het mij om gaat is hoe ik dit het beste op kan zetten.

Jan
 
Ik heb een klein testje gemaakt:

http://www.petrabe.nl/test10/index.php

index.php:

Code: 
<!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="en" lang="en">
<head>
     <ttitle>Untitled 1</title>
     <link rel="stylesheet" type="text/css" href="css/styles.css" />
     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
     <meta name="author" content="janbe" />


<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/general.js"></script>


</head>
 <body>
   <div id="box1">
   </div>
   <div id="box2">
   </div>
   <div id="box3">
   </div>
   <div id="box4">
   </div>
 </body>
</html>

general.js

Code: 
 $(document).ready(function() {  
  //initial
  $('#box1').load('test1.php');
  
 //handle menu clicks
  $('#button11').click(function() {
	alert('ok2');
 	return false;
  });

  $('#button12').click(function() {
	alert('ok');
    return false;
   });

  
});

en test1.php

Code: 
<!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="en" lang="en">


<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="janbe" />
    <title>Untitled 1</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/general.js"></script>



</head>
 <body> 
<button id="button11" >test11</button>
<button id="button12" >test2</button>
  </body>
</html>

echter als ik op de buttons druk gebeurt er niets

Als ik test1.php apart laad: www.petrabe.nl/test10/test1.php dan werken de buttons wel.

Uiteraard kan ik de buttons wel in index.php zetten, maar het idee is dat straks de inhoud van de div-jes wisselen.
 
general.js




Code: 
$(document).ready(function() {  
  //initial
  $('#box1').load('test1.php');
  
 //handle menu clicks
    $(document).on('click','#button1',function(){
      alert('ok');
      $('#box2').load('test2.php');
 });
 
    $(document).on('click','#button2',function(){
      alert('ok');
      $('#box2').load('test2.php');
 }); 
});

en de file/page test2.php wordt na de alert geladen in de div #box2.
Oplossing gekregen via het jquery forum.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan