jquery, byta innehåll i en div.

Du verkar osäker på vad du faktiskt vill åstadkomma.
Vill du helt enkelt "byta sida" när du klickar på en knapp i menyn?

Enklaste är att göra på det vanliga sättet, att använda nya HTML filer för varje sida, t.ex "about.html", och länka den till menyknappen.

Att använda jQuery innebär att man måste dölja "main" rutan och sedan visa en annan, t.ex "about" ruta, detta utan att man byter HTML dokument.

Det behöver han inte visa.

Har du någon gång arbetat med jQuery? Om inte, så är jQuery en lättare variant av JavaScript. Båda tillhör samma "familj", så att säga (jQuery bygger på JavaScript). För att kunna börja använda jQuery på din webbsida, så måste du lägga till källkoden för jQuery på din webbsida. Den bästa och enklaste lösningen, är att använda Google Hosted Libraries.

När du väl har lagt till länkningen, kan du skriva inom <script type="text/javascript"> och </script> följande kod:

$(document).ready(function() {

    // ...

});

Nu rättar sig webbsidan efter jQuery-biblioteket och även JavaScript. jQuery bygger ju som sagt på JavaScript, så du kan kombinera båda två. Koden nedan gör exakt det du vill att den ska göra.

<a href="javscript:void(0)" id="menu" data="start">Start</a><br>
<a href="javscript:void(0)" id="menu" data="about">Om</a><br><br>

<div id="content"></div>

$(document).ready(function() {

    // KLICK: Besökaren har klickat på någon länk i menyn
    $('body').on('click', '#menu', function() {

        // MENY: Start
        if($(this).attr('data') == 'start') {
            $('#content').html('Start');

        // MENY: Om
        } else if($(this).attr('data') == 'about') {
            $('#content').html('Om');
        }

    });

});

Du kan se hur koden ovan funkar på jsFiddle. Som du kan se, så behöver du inte byta DIV-tagg, utan du kan enkelt byta ut själva innehållet i DIV-taggen

-- -- -- --

Uppdatering
Om du vill göra så som Florrpan nämnde, om att hämta text från en fil, till DIV-taggen, så kan du använda följande kod:

<a href="javscript:void(0)" id="menu" data="start">Start</a><br>
<a href="javscript:void(0)" id="menu" data="about">Om</a><br><br>

<div id="content"></div>

$(document).ready(function() {

    // KLICK: Besökaren har klickat på någon länk i menyn
    $('body').on('click', '#menu', function() {

        $.ajax({
            url: $(this).attr('data') + '.html',    // $(this).attr('data') är namnet på filen, enligt länkens data=""
            method: 'GET',

            success: function(s) {
                $('#content').html(s);
            },

            error: function(e) {
                alert(e);
            }
        });

    });

});

Man kan också lösa det med jQuery + Ajax där du gör som vanligt d.v.s. du har olika html filer för olika sidor där sedan du bygger en "index" med framework, alltså det som finns på alla sidor (meny etc) och sedan använder ajax för att injekta kod i rätt plats. Blir som edgren skrev fast du tar in då hela filer.

Detta kan sedan fint expanderas med att ha lyssnare varje gång ajax laddar en sida för att sedan visa en fin loading information, hantera disconnects (om du är på mobil) och mycket mer.

http://www.w3schools.com/jquery/ajax_load.asp

jQuery är "en lättare variant av JavaScript" på samma sätt som chokladglass är en lättare variant av glass.

Aha! Ja. Jag var rätt så trött när jag skrev det där inlägget och läste igenom hans fråga och ditt svar

document.getElementById('menu').style.display = 'block';

Det där är mer omständigt än vad samma funktion i jQuery är:

$('#menu').show();

Så jQuery är en lättare variant av JavaScript

Det är viktigt att märka ord Någon kan ju säga något fel på internet.

<a href="javscript:void(0)" id="menu" data="start">Start</a><br>
<a href="javscript:void(0)" id="menu" data="about">Om</a><br><br>

<div id="content"></div>

$(document).ready(function() {

    // KLICK: Besökaren har klickat på någon länk i menyn
    $('body').on('click', '#menu', function() {

        $.ajax({
            url: $(this).attr('data') + '.html',    // $(this).attr('data') är namnet på filen, enligt länkens data=""
            method: 'GET',

            success: function(s) {
                $('#content').html(s);
            },

            error: function(e) {
                alert(e);
            }
        });

    });

});

Det de där kommer inte funka så bra, det är dumt att ha flera element med samme ID.

(Korrigerar enbart så att TS inte skall skriva fel kod som kanske inte funkar, inte för att vara messerschmidt)

Jag skulle gjort så här:

<div id="mainmenu">
	<a href="javscript:void(0)" class="menu-link" data-page="start">Start</a><br>
	<a href="javscript:void(0)" class="menu-link" data-page="about">Om</a><br><br>
</div>

<div id="content"></div>



<script>
	function BindMainMenu() {
		$("#mainmenu a").on("click", OpenMenuPage);
	}

	function OpenMenuPage()
	{
		var button = $(this);
		
		var pagename = button.attr("data-page") || "";
		
		if(pagename != "")
		{
			LoadPage(pagename);
		}
		
	}

	function LoadPage(pagename)
	{
		$("#content").load(pagename + ".html");
	}


	$(function() {

		BindMainMenu();

	});

</script>

Jag tror de flesta nykomlingar uppskattar att man ger dem korrekt information, tror inte du det? Det ena är ett språk (javascript för att vara övertydlig) och det andra ett bibliotek som bygger på det förstnämnda. Det är alltid javascript som programmeras, inte en avart som heter jQuery

Att förstå ett sådant sammanhang är essentiellt för att man ska kunna bygga en gedigen uppfattning om vad man egentligen pysslar med.

Varför funkar det utan några som helst problem för min del då?

jQuery är ett bibliotek som är skrivet i JavaScript, ja, men jag ser det mer som en lättare variant av JavaScript. Samma grund, fast enklare.