1

There are two links in html document, which i want to open with in same page(not window) but one link content should appear at a time?

<body>

<a href="numbers.html"> Numbers</a>
<a href="data.html"> Data</a>


<div id="show"> </div>

</body>
sira
  • 13
  • 2
  • 6
    Sorry, but what you're asking doesn't make a lot of sense. I'd recommend editing your question to add some more detail. – John Parker May 01 '11 at 09:22
  • Hi Sira, could you rephrase your question a little? I don't understand "one link content should appear at a time?" – Jim Blackler May 01 '11 at 09:23
  • @jim , i mean that if i click on 'numbers' link , the content of this link would appear under the link but when i click on 'data' link then just 'data' link content should appear and 'numbers' link content will be removed – sira May 01 '11 at 09:26
  • Looks like a case for `iframe`s if you want to have content from one page embedded in another. – Jim Blackler May 01 '11 at 09:28

2 Answers2

1

Using jQuery it becomes as simple as using one method called load.. to make it elegant first add class to your links, e.g.

<a class="loader" href="numbers.html">Numbers</a>
<a class="loader" href="data.html">Data</a>

Then include jQuery and have such code to achieve what you need:

$(document).ready(function() {
    $(".loader").each(function(index) {
        $(this).click(function() {
            $("#show").load($(this).attr("href"));
            return false;
        });
    });
});

This will load the HTML contents into the show div, replacing any previous contents.

Shadow The GPT Wizard
  • 66,030
  • 26
  • 140
  • 208
  • @sira Just add this line to your existing code: `` to include the latest jQuery hosted on Google servers. If you want, you can also copy that file to your own server and include it locally.. – Shadow The GPT Wizard May 01 '11 at 10:19
  • If you have doubt about Google read [this](http://stackoverflow.com/questions/547384/where-do-you-include-the-jquery-library-from-google-jsapi-cdn). – Shadow The GPT Wizard May 01 '11 at 10:21
0

what about you have an event on each link to switch between two divs, hide one and show the other. so it could be:

<div onclick="Show(numbers.html)"> Numbers</div>
<div  onclick="Show(data.html)"> Data</div>

and in Show() JS function you have and show the wanted div.

Arrabi
  • 3,718
  • 4
  • 26
  • 38
  • but as i have one div in which i want to open just one link content at a time not both at the same time ?? then what changes should be made in ur code – sira May 01 '11 at 09:40
  • in the Show() function, you hide all divs and show one div (the div you send its id when you called the function( – Arrabi May 01 '11 at 09:49