Show the default page on load

Question

In my code , I want to show the default content of first link on page . Below is my code , Here when I click on some link that time it it loads its content , Instead of that I want to show first link content on pages load , After user cliks on any link the the content has to get change

<!DOCTYPE html>
<html> 
<head>
   <script src="jquery.js" type="text/javascript"></script>
</head>

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

<div id="contents" style="width: 200px; height: 40px; border: dotted; margin-top: 20px;">
<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>
</div>
 <script>
     $("#nav a").click(function(e){
     e.preventDefault();
     $(".toggle").hide();
     var toShow = $(this).attr('id');
     $(toShow).show();
     });
 </script>
 </body>
 </html>

Below is JSFiddle link

http://jsfiddle.net/vP3Wj/

Salketer · Answer 1 · 2012-11-13T09:25:56.227

<!DOCTYPE html>
<html> 
<head>
   <script src="jquery.js" type="text/javascript"></script>
</head>

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

<div id="contents" style="width: 200px; height: 40px; border: dotted; margin-top: 20px;">
<div id="content1" class="toggle" style="">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>
</div>
 <script>
     $("#nav a").click(function(e){
     e.preventDefault();
     $(".toggle").hide();
     var toShow = $(this).attr('id');
     $('#'+toShow).show();
     });
 </script>
 </body>
 </html>

This way you have one div open at page load by ommiting the display:none on the content you want.

Sorry for wrong question, Actually I want to show content of first link as default . — Mulla Pervez, Nov 13 '12 at 09:13
then only remove the display:none of the line you want, I have corrected the answer to reflect the info you just gave me. — Salketer, Nov 13 '12 at 09:25

score 0 · Answer 2 · answered Nov 13 '12 at 08:55

0

#content1 is not a valid id. Try using the href attribute instead.

answered Nov 13 '12 at 08:55

Bobby Jack

14,812
10
59
94

1

What the answerer here is trying to say is that you accidentally added a `#` in front of the ID, and this is against the standard, which you can read more about here: http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html – h2ooooooo Nov 13 '12 at 08:57
I think the questioner did it on purpose, so they could use it as the selector string, but they could either use another attribute, or just pretend the # when they select. – Bobby Jack Nov 13 '12 at 08:59

score 0 · Answer 3 · answered Nov 13 '12 at 08:57

Just add another div for your default content, but not hided by default like the other divs, so like this:

<div id="contents" style="width: 200px; height: 40px; border: dotted; margin-top: 20px;">
<div id="defaultcontent" class="toggle">Default Content</div> <!-- HERE -->
<div id="content1" class="toggle" style="display:none">show the stuff1</div> 
...

See working example

score 0 · Answer 4 · answered Nov 13 '12 at 08:59

I would change your markup a bit, Im not to sure that # in a valid ID value, you could just use it as an hash/anchor on your links:

http://jsfiddle.net/vP3Wj/2/

when the page loads every block is hidden, we find all the a-elements and bind an click event on them. after that we filter out the first one of them and trigger its click event with jquery.

html: Show content 1 Show content 2 Show content 3

<div id="contents">
    <div id="content1" class="toggle">show the stuff1</div>
    <div id="content2" class="toggle">show the stuff2</div>
    <div id="content3" class="toggle">show the stuff3</div>
</div>

and the javascript:

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

Show the default page on load

4 Answers4