Box/table der skifter uden load

Jeg er langt fra hvad man kan kalde dygtig til Javascript, men jeg kan dog en smule ;-) Dog ikke nok til at kunne give nogle eksempler på kode der kan hvad du søger.

Men med Javascript kan du skjule og vise elementer ud fra deres ID (HTML id attribute), og med det kan man godt gøre hvad du ønsker. Jeg er dog ikke klar over om det er den ideelle løsning.

Det kan også gøres med innerHTML, altså erstatte indholdet af et element med noget nyt HTML.

Mit sidste bud er ved at lave det med Ajax (en metode i Javascript): Med Ajax kan man - uden at loade siden - hente data fra feks. en MySQL database gennem en anden side (PHP/ASP). Dette er nok ikke løsningen du leder efter, men det er ellers meget interesseant at rode med, især fordi man kan lave søgefunktioner som aldrig reloader siden.. Og i teorien kan man lave en hjemmeside som aldrig reloader, men henter indholdet og erstatter det gamle (det ville dog være hverken søgemaskinevenligt eller stabilt). Læs mere om Ajax her: http://w3schools.com/ajax/default.asp

Hej j4k0b

Det lyder spændende med det Ajax - Asynchronous JavaScript And XML da udtræk fra min DB gennem PHP ville være nyttigt. Jeg prøver nemlig at skabe løsninger der er så lette og overskuelige som overhovedet muligt.

Problemer er bare jeg har meget lidt forstand på JavaScript og CSS og kender intet til XML overhovedet. Men jeg vil prøve at grave mig igennem de informationer du har refereret til og se om der kommer nogle nyttige resultater ud af det.

Tak :-)

Kendskab til XML er ikke nødvendigt for at ligge dig i grav med AJAX, du kan såmen også bare hente HTML fra en anden side. Men XML er nok en god standard at overholde:)

-- det skal så tilføjes, at w3schools eksempel ikke har ret meget med rigtig ajax at gøre, bl.a. fordi den ikke benytter DOM til at vise data, men den helt tåbelige innerHTML, som altså ikke findes i nogensomhelst standarder eller rekommendationer !-)

-- men lige dit eksempel med ngle links, der udskifter indhld i en boks er nu meget simpelt:

<table style="width:150px;">
  <tr>
    <td style="height:70px;">
      <span onclick="visBlok('buyersDiv')">Buyers</span><br>
      <span onclick="visBlok('suppliersDiv')">Suppliers</span><br>
      <span onclick="visBlok('affiliatesDiv')">Affiliates</span></td>
  </tr>
  <tr>
    <td style="height:200px">
      <div id="buyersDiv">Her er en masse tekst om hvilke købere, der benytter dette site</div>
      <div id="suppliersDiv">Her er en masse tekst om de leverandører, der leverer til dette site</div>
      <div id="affiliatesDiv">Her er en masse tekst om de tilknyttede sider, dette site har</div></td>
  </tr>
</table>

<style type="text/css">
table td span{cursor:pointer;}
#buyersDiv{border:1px solid green;display:none;}
#suppliersDiv{border:1px solid red;display:none;}
#affiliatesDiv{border:1px solid blue;display:none;}
</style>

<script type="text/javascript">
var oldDiv = null;
function visBlok(id){
  elm = document.getElementById(id).style;
  if(oldDiv && oldDiv != elm)
    oldDiv.display = "none";
  elm.display = elm.display != "block" ? "block" : "none";
  oldDiv = elm;
}
</script>

-- de fleste styles er bare for at eksemplet skal være nemt at gennemskue !-)