If url is root domain, add class to id

Question

I want to get the user url on my site. I want to show if the user url is the root domain , add active class to the id home-item-menu . If not, don't do nothing.

I was using window.location.href and window.location.host but didn't work.

For the rest of section's I was using indexof (and the string that the url has), but because the root domain don't have any string I don't know how to do it.

  <nav class="cl-effect-5">
            <li class="nav-item" id="home-item-menu">
                <a class="nav-link menu-rucab js-scroll-trigger" href="#home"><span data-hover="HOME">HOME</span></a>
            </li>
                    </nav>
                  <nav class="cl-effect-5">
            <li class="nav-item" id="rucab-item-menu">
                <a class="nav-link menu-rucab js-scroll-trigger" href="#rucab"><span data-hover="RUCAB">RUCAB</span></a>
            </li>
             </nav>
                    <nav class="cl-effect-5">
            <li class="nav-item" id="inscripciones-item-menu">
                <a class="nav-link menu-rucab js-scroll-trigger" href="#inscripciones"><span data-hover="INSCRIPCIONES">INSCRIPCIONES</span></a>
            </li>
             </nav>
             <nav class="cl-effect-5">
            <li class="nav-item" id="habitaciones-item-menu">
                <a class="nav-link menu-rucab js-scroll-trigger" href="#habitaciones"><span data-hover="HABITACIONES">HABITACIONES</span></a>
            </li>
             </nav>
              <nav class="cl-effect-5">
            <li class="nav-item" id="staff-item-menu">
                <a class="nav-link menu-rucab js-scroll-trigger" href="#staff"><span data-hover="STAFF">STAFF</span></a>
            </li>
             </nav>
             <nav class="cl-effect-5">
            <li class="nav-item" id="blog-item-menu">
                <a class="nav-link menu-rucab js-scroll-trigger" href="#contact"><span data-hover="BLOG">BLOG</span></a>
            </li>
             </nav>
                    <nav class="cl-effect-5">
            <li class="nav-item" id="contacto-item-menu">
                <a class="nav-link menu-rucab js-scroll-trigger" href="#contacto"><span data-hover="CONTACTO">CONTACTO</span></a>
            </li>
             </nav>

JQuery/Javascript

$( document ).ready(
    function() {
var url = window.location.href;
var host = window.location.host;
if(url.indexOf('http://' + host + '/') != -1) {
    document.getElementById("home-item-menu").classList.add("active");
}
if (document.URL.indexOf("habitaciones") > -1)
{
    document.getElementById("habitaciones-item-menu").classList.add("active");

} else if (document.URL.indexOf("contacto") > -1) {
    document.getElementById("contacto-item-menu").classList.add("active");

} else if (document.URL.indexOf("rucab") > -1) {
    document.getElementById("rucab-item-menu").classList.add("active");

} else if (document.URL.indexOf("inscripciones") > -1) {
    document.getElementById("inscripciones-item-menu").classList.add("active");

} else if (document.URL.indexOf("staff") > -1) {
    document.getElementById("staff-item-menu").classList.add("active");

} else if (document.URL.indexOf("blog") > -1) {
    document.getElementById("blog-item-menu").classList.add("active");

}
});

Answer 1

You can use the condition window.location.pathname === '/' :

if(window.location.pathname === '/') {
    document.getElementById("home-item-menu").classList.add("active");
}

Answer 2

嗨@Pedro Corchero Murga，您可以使用javascript会话来实现此操作，将导航项的文本设置为javascript会话，并在加载功能上获取该会话，并检查条件（如果您不熟悉javascript会话），您可以看到此链接： https ：//www.w3schools.com/jsref/prop_win_sessionstorage.asp

Answer 3

First of all, define how you want to tell your application if this is my root URL , which one way to achieve this is as follows;

function isAtRoot () {
    // Let's say you're currently at 'https://myhome.domain/',
    // and this is your root.
    var href = window.location.href,
        urlWithoutQueryString = href.split('?')[0],
        host = window.location.host,
        regexp = new RegExp("^https?://" + host + "/?$", "i");

    return !!urlWithoutQueryString.match(regexp);
}

Or you can also use window.location.pathname for this.

Then, run your javascript like above as follows,

if (isAtRoot()) {
    document.getElementById("home-item-menu").classList.add("active");
}

However, I'd suggest that you have a list of paths for your site and give it an alias or name to it. Then, run something like isAtRoot against it instead, which will have more trust-able precision for future references.