Link using Javascript to show content dynamically without refreshing

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

-------------Problems Reply------------

See Working Demo

See this post on my blog:

  • Javascript: Active Content

So suppose you have some HTML such as:

<a href="#1">link1</a>
<a href="#2">link2</a>
<a href="#3">link3</a>
<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>

With CSS similar to:

ul li {display:none;}

Then you could use jQuery like:

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.

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

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.

Category:php Views:0 Time:2010-10-28
Tags: php javascript

Related post

  • Codeigniter trouble sending php var into javascript and .load content 2012-11-06

    Im having troubles sending a variable from php to javascript. I pull javascript (Ajax) trough this link. <script src="<?php echo base_url().'assets/js/main.js' ?>"></script> In my main.js : var base_url = '<?php echo base_url();

  • PHP: Load content dynamically based on the link clicked on the previous page? 2012-02-02

    I've been Google-ing this for the past 24 hours, pretty much. I can't seem to find an answer that fits my scenario, even though I know it's widely used. I have many links on one page (let's call it "page 1") of my website and I would like to them all

  • Href attribute for JavaScript links: "#" or "javascript:void(0)"? 2008-09-25

    When building a link that has the sole purpose to run JavaScript code, there are two ways to write the code. Which of the following is better, in terms of functionality, page load speed, validation purposes, etc.? <a href="#" onclick="myJsFunc();"

  • Do script tags and link tags go inside asp:content or outside 2009-03-24

    I have a page which has a masterpage. Do I put script and link tags inside the asp:content place holders or outside or does it matter. When I put it outside, I get the following warning: Only Content controls are allowed directly in a content page th

  • How to extract from html page links for javascript, css and img tags? 2011-06-26

    How to extract from html page links for javascript, css and img tags ? Do I need to use regular expression or there is already some lightweight library for html parsing ? --------------Solutions------------- HTML5Lib in combination with lxml is what

  • how to load content dynamically using PHP Query Strings? 2011-09-20

    i'm trying to avoid iFrames on the developing of a website. I've tried many sample codes but nothing seems to work. if you could tell me exactly where and how to put the code i would appreciate :) Thanks in advance. PS: everything is ok with the serv

  • What's the best way to allow the browser to fall back to a link if JavaScript is turned off or disabled? 2009-08-19

    I want to add some Ajax sorting options to a list. Since my site runs without JavaScript thus far I'd like to keep it running for people with it turned off, old/mobile browsers or noscript. How can I run a block of JavaScript when clicking a link if

  • Links css file to a content page 2009-10-07

    I have Master page and some content pages. I want to assign different css file to each of the content pages. (without using themes) How can I do that? --------------Solutions------------- I did that once by adding a header-placeholder in the master-p

  • How do I extract links in JavaScript that point to HTML pages in Perl? 2009-11-25

    I want to extract all the links from a page. I am using HTML:LinkExtor. How do I extract all the links that point to HTML content pages only? I also cannot extract these kinds of links: javascript:openpopup('

  • How can I create and call a javascript function on a dynamically loaded user control? 2010-05-25

    when i try to call a javascript function in a dynamically loaded user control, it cannot find the function specified. I have a user control for organizationDetails.ascx. In there, I am using modal popup extender to get some information from the user

  • Invoking the HREF attribute of a link with javascript using javascript! 2010-09-10

    I never seen this before but you can invoke the HREF attribute of a link using javascript if the HREF contains javascript:;//code......; On my example below click on both links. they do the same thing even though they have different javascript in the

  • How do I create a link using javascript? 2011-01-23

    I have a string for a title and a string for a link. I'm not sure how to put the two together to create a link on a page using Javascript. Any help is appreciated. EDIT1: Adding more detail to the question. The reason I'm trying to figure this out is

  • Load Content Dynamically With Ajax Into Each Pane Using Cool Menu 2011-02-27

    Please reference this link: Load Content Dynamically Into Each Pane Using Cool Menu Does anyone know how to do this? --------------Solutions------------- why don't you just try the tutorial that was posted in the post?

  • change fck editor content dynamically 2011-03-08

    i want to change fck editor content dynamically When i change select box option(on change) the value of the fck editor should change Any possible in php or javascript (fck editor configuration ) Thanks in advance --------------Solutions-------------

  • Link changing class of parent , content of two elements 2011-04-13

    Interesting (and rather complex) issue here... What I have is a page with two iframes and a set of links at the top, each contained inside a div with an image background. What I want is for the contents of both iframes to change (to two separate html

  • Swap div on link hover - Javascript error in Firefox 2011-07-10

    I have some code which allows me to hover over a number of links and subsequently replace the content in a specified DIV. It works in most browsers but Firefox gives an error - the error can be 'fixed' by removing the doctype code for the page, but c

  • Submitting a form with javascript that has been dynamically created 2011-09-10

    SO i am trying to submit a form with javascript without a submit button and using a text link. However, this form is dynamically created in php as follows <form action="profile.php" method="POST" id="searchResultProfileView1" enctype="multipart/fo

  • Syntax error loading content dynamically in html page with ajax 2012-01-10

    I am trying to load some content dynamically in my HTML div. If I try to do this, I get an error: Syntax error HOME. (this is the content that should be visible within the div). HTML: Navigation bar: <li><a href="#" onclick="replaceContent('

  • Facebook share link - no javascript 2012-02-02

    The following link is for sharing a page on twitter: Is there a similar option for Facebook, that doesn't require javascript? I know about, but that requires a get parameter to be inserted manua

Copyright (C), All Rights Reserved.

processed in 0.166 (s). 11 q(s)