I am currently working on a small webpage that consists of three sections. Only one section is displayed at a time while the others remain hidden. The welcome section is shown by default when the page loads, and the rest are set to display:none. By clicking the menu buttons for the other sections, the desired section is displayed, and all others are hidden. I have implemented jQuery for this functionality. However, I am facing an issue with creating URLs to navigate to specific sections. Typically, I would create an anchor tag with a unique name and add #XXX at the end of the URL to go to a visible section on a page. But, this method doesn't work on hidden div elements.
Any suggestions on how to achieve this?
Here is the HTML code:
<div id="menu">
<p><a href="#" id="menu-home">Home</a></p>
<p><a href="#" id="menu-page1">Page 1</a></p>
<p><a href="#" id="menu-page2">Page 2</a></p>
</div>
<div id="home">
<h1>Welcome!</h1>
<p>This is where all the home page content will be placed.</p>
</div>
<div id="page1">
<h1>Page 1</h1>
<p>Content for Page 1 will be displayed here.</p>
</div>
<div id="page2">
<h1>Page 2</h1>
<p>Content for Page 2 goes here.</p>
</div>
CSS styles:
#page1 {
display:none;
}
#page2 {
display:none;
}
JavaScript function:
$(document).ready(function(){
$('#menu-home').click(function(){
$('#home').show('fast');
$('#page1').hide('fast');
$('#page2').hide('fast');
});
$('#menu-page1').click(function(){
$('#page1').show('fast');
$('#home').hide('fast');
$('#page2').hide('fast');
});
$('#menu-page2').click(function(){
$('#page2').show('fast');
$('#home').hide('fast');
$('#page1').hide('fast');
});
});