Question

I have this content box on my site, that has different tabs on the side and when you click on one of the tabs, it uses JS to hide/show the according divs inside the content box.

I also have this in my head to give each div inside the content box it’s own URL:

<script type="text/javascript">
  function loadSmugInfo() {
    if(window.location.hash == '#smuginfo')
      document.getElementById('contentInfo').style.display = "block";
      document.getElementById('contentSlideshow').style.display = "none"
  }
</script>

<script type="text/javascript">
  function loadFind() {
    if(window.location.hash == '#find')
      document.getElementById('contentMap').style.display = "block";
      document.getElementById('contentSlideshow').style.display = "none"
  }
</script>

<script type="text/javascript">
  function loadSmugmug() {
    if(window.location.hash == '#smugmug')
      document.getElementById('contentSmugInfo').style.display = "block";
      document.getElementById('contentSlideshow').style.display = "none"
  }
</script>

<script type="text/javascript">
  function loadMain() {
    if(window.location.hash == '#')
      document.getElementById('contentSlideshow').style.display = "block"
  }
</script>

<script type="text/javascript">
  function loadSlideshow() {
    if(window.location.hash == '#slideshow')
      document.getElementById('contentSlideshow').style.display = "block"
  }
</script>

I also have it so when you a click a tab, it changes the hash.

Here is my problem.
When the page loads like normal (without a hash), the first and topmost div, is still not displaying (even though it’s set to display: block in CSS).

I’m loading the functions you see above, using onLoad on an image above the content box.

Any help would be appreciated, I’m on a little bit of a tight schedule.
Let me know if you need any more information.
Thanks!

Answer 1

If you’re doing what I understood you’re doing, you’d have to use

if( (window.location.hash == '#') || (window.location.hash == '')

instead of

if(window.location.hash == '#')

since the hash is empty when the script is loading.

On a side note:

You only need one function for all of this:

function whatever()
{
    if(window.location.hash == '#smuginfo')
    {
        case1
    }
    else if(window.location.hash == '#find')
    {
        case2
    }
    .
    .
    .
    else
    {
        default for no hash
    }
}

It would be shorter with a switch statement…