linken in DIV

Status
Niet open voor verdere reacties.
H

hollander

Gebruiker
Lid geworden
23 mrt 2005
Berichten
210
mijn vraag is:
hoe kan ik als ik in de ene div een menu heb staan met links als ik dan op een link klik het zo krijgen dat ie hem opent in een andere div ?

Code: 
<html>
<head>
<title>css test</title>
<style type="text/css">
#kopmenu {position: absolute; left: 50px; top: 90px;
border:solid 1px #000000; padding: 4px; width: 70px; height: 15px; background: #FF6600;}

#menu {
position: absolute; left: 50px; top: 120;
border:solid 1px #000000; padding: 4px; width: 70px; background: #339900;}

#textvlak {
position: absolute; left: 250; top: 90px; border:solid 1px #000000; padding: 4px; background: #339900;}

a:link { color: black; text-decoration: none }
a:visited { color: blue; text-decoration: none }
a:hover { color: purple; text-decoration: none }
a:active { color: green; text-decoration: none }

</style>
</head>
<body>
<div id="kopmenu">
<center>Links</center>
</div>


<div id="menu">
<a href="page1.html"> Link 1 </a> <br />
<a href="page2.html"> Link 2 </a> <br />
<a href="page3.html"> Link 3 </a>
</div>


<div id="textvlak">
hier verschijn de tekst dus
</div>
</body>
</html>

dus als ik in het menu op een link klik dat ie hem in het textvlak opent bedoel ik..

alvast bedankt voor u hulp
 
Target van de FORM dient dan het adres te zijn waar het FORM zelf in staat. Je herstart dan als het ware de pagina.

Met behulp van ASP of PHP kun je dan met een IF of CASE constructie een andere pagina includen.
 
Waarom moet het in de div openen.

je code
Code: 
<div id="menu">
<a href="page1.html"> Link 1 </a> <br />
<a href="page2.html"> Link 2 </a> <br />
<a href="page3.html"> Link 3 </a>
</div>


<div id="textvlak">
hier verschijn de tekst dus
</div>

kan dus nooit iets in de div openen,
dit omdat je een html pagina oproept: a href="page1.html"

Dus gewoon zo:
Code: 
<div id="menu">
<a href="page1.html"> Link 1 </a> <br />
<a href="page2.html"> Link 2 </a> <br />
<a href="page3.html"> Link 3 </a>
</div>


<div id="textvlak">
hier verschijn de tekst dus van pagina page1.html
</div>
save as index.html

Dan
Code: 
<div id="menu">
<a href="page1.html"> Link 1 </a> <br />
<a href="page2.html"> Link 2 </a> <br />
<a href="page3.html"> Link 3 </a>
</div>


<div id="textvlak">
hier verschijn de tekst dus van pagina page2.html
</div>
save as page2.html

Dan
Code: 
<div id="menu">
<a href="page1.html"> Link 1 </a> <br />
<a href="page2.html"> Link 2 </a> <br />
<a href="page3.html"> Link 3 </a>
</div>


<div id="textvlak">
hier verschijn de tekst dus van pagina page3.html
</div>
save as page3.html
 
Als je niet met een serverside taal wilt werken zul je het met frames op moeten lossen.
 
bedankt voor jullie antwoorden .. ik ga maar es een snel cursus php volgen.. want met frames werken vind ik persoonlijk niet leuk .. , allemaal bedankt :thumb: :thumb:
 
hoi,
het is toch niet de bedoeling dat je div id="menu" op elke pagina gaat zetten ?
volgens mij moet het zoiets zijn :

<a href="" onclick="change_content('midden', 'welkom.htm')">

maar het lukt niet bij mij ! iemand een idee ?
grtz


peter vazed zei:
Waarom moet het in de div openen.

je code
Code: 
<div id="menu">
<a href="page1.html"> Link 1 </a> <br />
<a href="page2.html"> Link 2 </a> <br />
<a href="page3.html"> Link 3 </a>
</div>


<div id="textvlak">
hier verschijn de tekst dus
</div>

kan dus nooit iets in de div openen,
dit omdat je een html pagina oproept: a href="page1.html"

Dus gewoon zo:
Code: 
<div id="menu">
<a href="page1.html"> Link 1 </a> <br />
<a href="page2.html"> Link 2 </a> <br />
<a href="page3.html"> Link 3 </a>
</div>


<div id="textvlak">
hier verschijn de tekst dus van pagina page1.html
</div>
save as index.html

Dan
Code: 
<div id="menu">
<a href="page1.html"> Link 1 </a> <br />
<a href="page2.html"> Link 2 </a> <br />
<a href="page3.html"> Link 3 </a>
</div>


<div id="textvlak">
hier verschijn de tekst dus van pagina page2.html
</div>
save as page2.html

Dan
Code: 
<div id="menu">
<a href="page1.html"> Link 1 </a> <br />
<a href="page2.html"> Link 2 </a> <br />
<a href="page3.html"> Link 3 </a>
</div>


<div id="textvlak">
hier verschijn de tekst dus van pagina page3.html
</div>
save as page3.html
Klik om te vergroten...
 
Je zou het ook nog met AJAX kunnen oplossen:

PHP: 
<script type="text/javascript">
function maakXMLObj()
{
   var objXml = false; 
   try
   {
    // Firefox, Opera 8.0+, Safari
    objXml = new XMLHttpRequest();
   }
   catch (e)
   {
    // Internet Explorer
     try
     {
       objXml = new ActiveXObject("Msxml2.XMLHTTP");
     }
     catch (e)
     {
       try
       {
         objXml = new ActiveXObject("Microsoft.XMLHTTP");
       }
         catch (e)
       {
         alert("Uh-ohw, je browser ondersteund geen AJAX!");
         return false;
       }
     }
   }
   return objXml;
}

function change_content ( target, content ) {
  var xmlHttp = maakXMLObj();

  xmlHttp.open ( "GET", content, true );
  xmlHttp.onreadystatechange = function () {
    if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) {
      document.getElementById(target).innerHTML = xmlHttp.responseText;
    }
  }
  xmlHttp.send(null);
}

</script>

<div id="menu">
<a href="#" onclick="change_content( 'textvlak', 'page1.html' )"> Link 1 </a> <br />
<a href="#" onclick="change_content( 'textvlak', 'page2.html' )"> Link 2 </a> <br />
<a href="#" onclick="change_content( 'textvlak', 'page3.html' )"> Link 3 </a>
</div>


<div id="textvlak">
Hier verschijnt de content
</div>

(Niet getest, maar ik neem aan dat het werkt)

EDIT: ik heb het nu wel getest, en het werkt zo niet :o . Je zult de ' && xmlHttp.status == 200' weg moeten laten, aangezien die blijkbaar niet mee wordt gestuurd als je lokaal (zonder geïnstalleerde server) test. Daarnaast geeft FF een syntaxisfout in de pagina die je inlaadt. Ik heb geen flauw idee waarom.

Overigens, als je het status deel weglaat, werkt het wel gewoon.
 
Laatst bewerkt:
thanks Erik,

het werkt bij mij ook.
Ik heb nog iets gelijkaardigs gevonden op volgende website :
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Thanks ...

ErikBooy007 zei:
Je zou het ook nog met AJAX kunnen oplossen:

PHP: 
<script type="text/javascript">
function maakXMLObj()
{
   var objXml = false; 
   try
   {
    // Firefox, Opera 8.0+, Safari
    objXml = new XMLHttpRequest();
   }
   catch (e)
   {
    // Internet Explorer
     try
     {
       objXml = new ActiveXObject("Msxml2.XMLHTTP");
     }
     catch (e)
     {
       try
       {
         objXml = new ActiveXObject("Microsoft.XMLHTTP");
       }
         catch (e)
       {
         alert("Uh-ohw, je browser ondersteund geen AJAX!");
         return false;
       }
     }
   }
   return objXml;
}

function change_content ( target, content ) {
  var xmlHttp = maakXMLObj();

  xmlHttp.open ( "GET", content, true );
  xmlHttp.onreadystatechange = function () {
    if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) {
      document.getElementById(target).innerHTML = xmlHttp.responseText;
    }
  }
  xmlHttp.send(null);
}

</script>

<div id="menu">
<a href="#" onclick="change_content( 'textvlak', 'page1.html' )"> Link 1 </a> <br />
<a href="#" onclick="change_content( 'textvlak', 'page2.html' )"> Link 2 </a> <br />
<a href="#" onclick="change_content( 'textvlak', 'page3.html' )"> Link 3 </a>
</div>


<div id="textvlak">
Hier verschijnt de content
</div>

(Niet getest, maar ik neem aan dat het werkt)

EDIT: ik heb het nu wel getest, en het werkt zo niet :o . Je zult de ' && xmlHttp.status == 200' weg moeten laten, aangezien die blijkbaar niet mee wordt gestuurd als je lokaal (zonder geïnstalleerde server) test. Daarnaast geeft FF een syntaxisfout in de pagina die je inlaadt. Ik heb geen flauw idee waarom.

Overigens, als je het status deel weglaat, werkt het wel gewoon.
Klik om te vergroten...
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan