Question

99

Dynamically change body content

rated 0 times [ 106] [ 7] / answers: 1 / hits: 16024 / 12 Years ago, fri, may 11, 2012, 12:00:00

How do I dynamically change the body content of an html page when a link is clicked?

So I have 3 html pages that looks like this:

<li><a id=homeContainer href=#>Home</a></li>

<li><a id=testContainer href='#'>test</a></li>

<li><a id=pageContainer href=#>page</a></li>

My div:

<div id='container'>

  </div>

The javascript:

$( document ).ready( function() {

        $( '#testContainer' ).click( function() {

            $( '#container' ).load('test.html');

        });

This works fine if i make for all pages a separate function. But how can I make the javascript function taking a page in the load() function instead of hardcoding it?

[Edit]

I dropped my whole page with everything, html, javascript and css here:
jsfiddle

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

domeniccolti

Add To Favorites

Follow

Total Points: 276

Total Questions: 98

Total Answers: 93

Location: India

Member since Fri, May 13, 2022

2 Years ago

domeniccolti questions

1 MUI Autocomplete custom options, not showing selected option

Mon, Oct 18, 21, 00:00, 3 Years ago

1 Discord.JS V13 client.on messagecreate not firing

Thu, Oct 14, 21, 00:00, 3 Years ago

1 Using Fetch API to create a Login form

Thu, Jul 15, 21, 00:00, 3 Years ago

1 React JS - How to detect navigator.platform in Next JS

Sat, Oct 24, 20, 00:00, 4 Years ago

1 jsPDF is not defined in javascript

Thu, Sep 3, 20, 00:00, 4 Years ago

View All

answered 12 Years ago parker · Accepted Answer

try :

HTML

<li><a id=homeContainer href=home.html>Home</a></li>

<li><a id=testContainer href='test.html'>test</a></li>

<li><a id=pageContainer href=page.html>page</a></li>

Javascript

$(document).ready(function()

{

    $( 'li>a[id$=Container]' ).click(function(event) 

    {

        event.preventDefault();

        var href = $(this).attr('href');

        alert(Loading  + href)

        $('#container').load(href);

        return false;

    });

});

Edit

Try out this JSFiddle using JQuery