Want to show one section of Div when page is initially loaded

Want to show one section of Div when page is initially loaded

I'm new to Jquery and 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-3" 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>