CODEWITHSUNDEEP
phpjavascriptcss
AlThePal78
AlThePal78

Reputation: 1112

Clicking a link display it in Different Div on Same Page

I would like to know if there is a way to be able to click a Link on the navigational Div tag and have it display on the content Div like if i had

<div id="nav">
<a href="infoto (div id="content")">a link </a></div>
<div id="content>show the stuff</div>

From the comments below - the OP stated the following :

I am trying to redo a website but my imagagination is getting the better of me. If I have three links like home, about author, and about our mission. I would like to be able to click about author and in the main_content div tag show the html file aboutauthor.html

Upvotes: 0

Views: 61317

Answers (4)

David Houde
David Houde

Reputation: 4778

Using jQuery, you could do something like this.

This will open the site <a href="example.html"> and put it inside of the <div id="content"> when you click it, and then disable changing the whole site.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
 $(document).ready(function() {
  $('#nav a').click(function(e) {
   e.preventDefault();
   $('#content').load($(this).attr('href'));
  });
 });
</script>

<div id="nav">
   <a href="somepage.html">Some page</a>
   <a href="someotherpage.html">Some other page</a>
   <a href="smypage.html">My page</a>
</div>
<div id="content">
 show the stuff
</div>

Upvotes: 2

user920041
user920041

Reputation:

Alt 1: Use jquery tabs: See demo and code here: http://jqueryui.com/demos/tabs/

Alt 2: Hide/show div in same html file:

HTML:

<div id="nav">
    <a href="#content1">Show content 1</a>
    <a href="#content2">Show content 2</a>
    <a href="#content3">Show content 3</a>
</div>

<div id="content1" class="toggle" style="display:none">show the stuff1</div> 
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>

jQuery:

$("#nav a").click(function(e){
    e.preventDefault();
    $(".toggle").hide();
    var toShow = $(this).attr('href');
    $(toShow).show();
});

Demo: http://jsfiddle.net/5NEu3/3/

Alt 3: Load from server ondemand:

To load html into your main div you should use: http://api.jquery.com/load/ Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.

Html

<a href="http:www.test.com/test1.html">Show content 1</a>
<a href="http:www.test.com/test2.html">Show content 2</a>

jQuery

$("#nav a").click(function(e){
        e.preventDefault();
        $('#maindiv').load($(this).attr("href"));
});

Upvotes: 8

Gordnfreeman
Gordnfreeman

Reputation: 1615

to show a hidden div (i think this is what you wanted)

the javascript (using jQuery)

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $("#showdiv").click(function () {
       $("#hiddendiv").show();             
    });
  });
 <script>

the html

<a href="javascript: void(0)" id="showdiv">Show the Div</a>
<div id="hiddendiv" style="display:none;">Content here</div>

you can see it in action here

Upvotes: 0

CodeCaster
CodeCaster

Reputation: 151586

Something like this:

function setContent(div, content)
{
    getElementById(div).innerHtml = content;
    return false; // return false to ignore the click
}

<a href="path-to-non-js-browsers-and-search-engines.html" onClick="setContent('content','foo');">a link </a>

Upvotes: 0

Related Questions