Блог

Я хочу получить пользователя url на своем сайте. Я хочу показать, является ли URL-адрес пользователя корневым доменом, добавьте active class в id home-item-menu . Если нет, ничего не делайте.

Я использовал window.location.href и window.location.host , но не работал.

Для остальной части раздела я использовал indexof (и строку, которая есть в URL), но поскольку в корневом домене нет никакой строки, я не знаю, как это сделать.

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

}
});
  

Вы можете использовать условие window.location.pathname === '/' :

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

Привет, @Pedro Corchero Murga для достижения этой цели вы можете использовать сеансы javascript, установить текст элемента навигации в сеанс javascript и получить этот сеанс при загрузке функции и проверить условия, если вы не знакомы с сеансами javascript, вы можете увидеть эту ссылку:https://www.w3schools.com/jsref/prop_win_sessionstorage.asp

Прежде всего, определите, как вы хотите сообщить своему приложению, является ли это мой корневой URL, какой из способов добиться этого заключается в следующем;

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

Или вы также можете использовать window.Расположение.имя_патья для этого.

Затем запустите свой javascript, как указано выше, следующим образом,

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

Однако я бы посоветовал вам составить список путей для вашего сайта и присвоить ему псевдоним или имя. Затем вместо этого запустите что-то вроде isAtRoot против него, что будет иметь более надежную точность для будущих ссылок.