Show and hide element when URL contains certain section of text?

I require #nav1 to display and #nav2 to hide on all pages which include “/category-1/” in the URL.

I require #nav2 to display and #nav1 to hide on all pages which include “/category-2/” in the URL.

I have this code:

    <script>  

var url = window.location.href;

if (url.indexOf("/category-1/") > -1)
{
    document.getElementById('#nav1').style.display = 'none';
    document.getElementById('#nav2').style.display = 'true';
}

else if (url.indexOf("/category-2/") > -1)
{
    document.getElementById('#nav2').style.display = 'none';
    document.getElementById('#nav1').style.display = 'true';
}

</script>

But it appears to be having no effect.

Thanks,
Michael