Creating a one-page site with navigation tabs that toggle between hidden divs using :target CSS3 selector is my current project. To ensure the first div is visible upon page load, I implemented this line of code:
document.location.href = "#div1";
The HTML markup:
<div id="nav">
<a href="#div1">div1</a>|
<a href="#div2">div2</a>|
<a href="#div3">div3</a>
</div>
<div id="div1"><h1>div1</h1><p>div1</p></div>
<div id="div2"><h1>div2</h1> <p>div2</p></div>
<div id="div3"><h1>div3</h1><p>div3</p></div>
CSS styles applied:
#div1, #div2, #div3
{
position: relative;
display: none;
background: #ff7;
width: 400px;
height: 400px;
}
#div1:target, #div2:target, #div3:target
{
display: block;
}
A demo working in Chrome can be viewed here.
While the setup functions well in Chrome, Firefox experiences issues with the initial visibility of the first div upon page loading. Additionally, Internet Explorer fails to recognize the :target selector and fails to display the first div on page load. Is there a solution to address these discrepancies?
Troubleshooting tips for different browsers:
<script>
document.location.hash = "#div1";
</script>
<style>
#div1, #div2, #div3
{
position: relative;
display: none;
background: #ff7;
width: 400px;
height: 400px;
}
#div1:target, #div2:target, #div3:target
{
display: block;
}
</style>
<div id="nav">
<a href="#div1">div1</a>|
<a href="#div2">div2</a>|
<a href="#div3">div3</a>
</div>
<div class="clear"></div>
<div id="div1"><h1>div1</h1><p>div1</p></div>
<div id="div2"><h1>div2</h1> <p>div2</p></div>
<div id="div3"><h1>div3</h1><p>div3</p></div>
When testing the above code snippet in Firefox, the issue persists where #div1 remains invisible upon page load. A simple refresh rectifies this problem.