Estoy tratando de ocultar algunos elementos en una página según el contenido del elemento específico en una barra de navegación (formada como una lista) que tiene una clase activa. Esto es lo que he intentado hasta ahora.

 var element=document.querySelector('ul.nav > li.active') if((typeof element != 'undefined')?element.innerText == "Page 1") { document.getElementById("options1").style.display = 'none'; }

Y el HTML con el que necesito trabajar es básicamente el siguiente.

 <ul class="nav navbar-nav navbar-left"> <li class="active"> <a href="#section-page-1">Page 1</a> </li> <li> <a href="#section-page-2">Page 2</a> </li> <li> <a href="#section-page-3">Page 3</a> </li> </ul> <div id="options1">Stuff Here</div>

El comportamiento que quiero es que cuando la Página 1 esté activa, el <div> esté oculto, y cuando todas las demás páginas estén activas, el <div> esté visible.

Probé un montón de cosas estrechamente relacionadas con el desbordamiento de pila, pero aún no he logrado que nada funcione.

¡Gracias! Soy bastante nuevo en javascript.