sammeeker
-
Posts
1 -
Joined
-
Last visited
sammeeker's Achievements
Newbie (1/5)
0
Reputation
-
I need some help trying to get this page to load the "#page1" when the page initially loads. I've tried a couple things but am either getting nothing (from the display:none in CSS) or if I remove that, it displays all the "#page1-6" elements alltogether when the page initially loads. It works fine once I start clicking the menu, its just the initial loading. .page { position: relative; display: none; } </style> </head> <body > <script src="jquery.js"></script> <script> $(document).ready(function() { $(".page-link").on("click", function(e) { $(".page").fadeOut(250); setTimeout(function() { $($(e.currentTarget).attr("href")).fadeIn(250); }, 250); }); });</script> <ul class="semiopaquemenu"> <li><a href="#page1" class="page-link"><span class="titlefont">Gallery</span></a></li> <li><a href="#page2" class="page-link"><span class="titlefont">Bio</a></li> <li><a href="#page3" class="page-link"><span class="titlefont">Statement</span></a></li> </ul> <div id="pages"> <div id="page1" class="page"> <h1>Page 1</h1> <p>This is the first test page.</p> </div> <div id="page2" class="page"> <h1>Page 2</h1> <p>This is the second test page.</p> </div> <div id="page3" class="page"> <h1>Page 3</h1> <p>This is third test page.</p> </div>