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>