CODEWITHSUNDEEP
javascriptjqueryhtmlcss
clouddy
clouddy

Reputation: 1081

Changing HTML content on menu item click

I am trying to change the content of the yellow area when the user clicks on 'Dashboard', 'customers' etc: Here is the template I used

First I tried to change index.js I gave an id to div area:

$('.icon-dashboard').on('click', function() {
    $("#area").load("secondpage.html #area > *");
});

This didn't work for me. Any suggestions to change the content between main tags?

Upvotes: 1

Views: 497

Answers (1)

Chad
Chad

Reputation: 693

Your selector for the load command is wrong. Your HTML shows a <main> tag with <div class="helper"> so you would want to use $("main .helper").load(...) to load content into "helper". Or, if you want to replace the "helper" div with whatever comes back from .load, just do $("main").load(...).

Also, passing "secondpage.html" to .load() is only going to work in the local browser. I'm assuming you're only doing that because you're testing? Ultimately, you'll need some backend script at an URL to return your content.

Upvotes: 1

Related Questions