sammeeker Posted April 15, 2013 Share Posted April 15, 2013 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.