Link using Javascript to show content dynamically without refreshing

Question

I want to put some links in my web page. I am using php for developing my webpage When user click any one of it, the content corresponding to that link will show just below it without refreshing the whole page I know it a simple basic, but I dont know javascript much to work with... Can anyone please help me...

link1   link2   link3   link4   link5


content......
...................
...................
...................

when clicks link1 it will show a set of content, or if link2 then with another set of content and so on... without refreshing the page

Answer 1

you can use a div and set its property to hidden and on click to visible Do you need a example?

Answer 2

See Working Demo

---

See this post on my blog:

• Javascript: Active Content

Answer 3

You should look up JQuery. They have a nice frame work that you can use to get thigns like this plus examples. you can also search "php and Jquery" on google that should start you on the right track. Try learning villina JavaScript too, that'll help you along the way.

Answer 4

Use PHP with Ajax

Refer this link
w3schools.com

Answer 5

So suppose you have some HTML such as:

<a href="#1">link1</a>
<a href="#2">link2</a>
<a href="#3">link3</a>
<ul>
    <li id="content1"><a name="1"></a>Content1</li>
    <li id="content2"><a name="2"></a>Content2</li>
    <li id="content3"><a name="3"></a>Content3</li>
</ul>

With CSS similar to:

ul li  {display:none;}

Then you could use jQuery like:

$('a').click(function(){
    var contentId = $(this).attr('href').substr(1);
    $('ul li:visible').hide(); //Hide any currently visible content areas
    $('#content'+contentId).show(); //Show the content area that corresponds to the link
    return false; //This stops the default behaviour of the link
});

The above code would simply hide and show the various content areas when the various links are clicked. jQuery has been used in this example to keep it short, the same functionality is easy to achieve in standard JavaScript or any other framework. Also if JavaScript is not available then the links would link to the anchors in the content as a fall back.

Of course you could use AJAX for this sort of functionality, but it would probably be over the top if the content isn't that large. The easiest (cross-browser compatible) way to use AJAX is with jQuery.