Question

我想让用户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");

}
});

Answer 1

您可以使用条件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

首先，定义这是我的根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.location.pathname。

然后，按如下所示运行您的JavaScript，

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

但是，我建议您有一个站点路径列表，并为其指定别名或名称。然后，对它运行类似isAtRoot的操作，这样可以为将来的引用提供更高的可信度。

如果url是根域，则将类添加到id

3 个答案: