CODEWITHSUNDEEP
javascriptjquerycss
Pedro Corchero Murga
Pedro Corchero Murga

Reputation: 505

If url is root domain, add class to id

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");

}
});

Upvotes: 0

Views: 179

Answers (3)

choz
choz

Reputation: 17888

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.

Upvotes: 0

Giu Magnani
Giu Magnani

Reputation: 448

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

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

Upvotes: 2

Aeraz
Aeraz

Reputation: 21

Hi @Pedro Corchero Murga you can use javascript sessions to achieve this set the text of the nav item to javascript session and get that session on load function and check the conditions if you don't familiar with javascript sessions you can see this link : https://www.w3schools.com/jsref/prop_win_sessionstorage.asp

Upvotes: 0

Related Questions