Alternativ till framset

KarlRoos · 2009-12-07, 21:28

HTML:

Kod:

<ul id="menu">
<li><a href="sida1.html">Sida 1</a></li>
<li><a href="sida2.html">Sida 2</a></li>
</ul>
<div id="main">
</div>

CSS:

Kod:

ul
{text-align: center;}

ul li
{display: inline;}

#main
{width: 960px; margin: auto;}

JS (inom <head>)

Kod:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$("#menu li a").click(function(){
var file = $(this).attr("href");
$("#main").load(file);
return false;
});
</script>

Det här fungerar ungefär som med frames (fast mycket bättre och korrekt). Om du inte förstår själva koden så kan jag förklara den men det borde vara ganska straight forward.

JS koden använder biblioteket jQuery som även inkluderas. Den binder sedan klick på menyn till en funktion som kollar vilken fil som står i href och sedan laddar den till diven #main.

OBS: otestad kod, borde funka.

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Alternativ till framset