javascript - 为什么我不能突出显示我当前所在的链接？

Question

我基本上有一个带有几个链接的侧边栏导航。我希望能够根据我所在的页面突出显示相应的链接。

由于某些原因，我的代码似乎无法正常工作。

这是 html 文件:

<div class='sidebar'>
                <div class='title'>
                    Sonder
                </div>
                <ul class='nav'>
                    <li><a class='active' href='members.php?view = <?=$user?>'>Home</a></li>
                    <li><a href='members.php' >Members</a></li>
                    <li><a href='friends.php' >Friends</a></li>
                    <li><a href='messages.php'>Messages</a></li>
                    <li><a href='profile.php'>Edit Profile</a></li>
                    <li><a href='logout.php'>Logout</a></li>
                </ul>
            </div>

这是CSS的一部分:

.nav li a {
    position: relative;
    display: block;
    padding: 15px 15px 15px 50px;
    font-size: 12px;
    color: #eee;
    border-bottom: 1px solid #222;
    cursor: pointer;
}

.nav li a:before {
    font: 14px fontawesome;
    position: absolute;
    top: 14px;
    left: 20px;
}
.nav li:nth-child(1) a:before {
    content: '\f015';
}

.nav li:nth-child(2) a:before {
    content: '\f0c2';
}

.nav li:nth-child(3) a:before {
    content: '\f183';
    left: 23px;
}

.nav li:nth-child(4) a:before {
    content: '\f003';
}

.nav li:nth-child(5) a:before {
    content: '\f013';
}

.nav li:nth-child(6) a:before {
    content: '\f023';
    left: 22px;
}

.nav li a:hover {
    background: #444;
}

.nav li a.active {
    box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222;
    background: #444;
}

这是javascript代码:

$(document).ready(function() {
   setNavigation();

});

function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);

    $(".nav a").each(function () {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
        }
    });
}

Answer 1

您的代码中存在一些问题。

1. path JS 变量前面有一个正斜杠，即 /members.php 或 /friends.php。出于这个原因，path.substring(0, href.length) 部分像 /members.ph 一样返回，它与页面中的任何 href 都不匹配。

2. 突出显示菜单的事件类位于 anchor 标记元素上，而不是根据您编写的 CSS 在 li 标签元素中，但是您尝试使用 JS 将事件类添加到 li。

这是一个完整的有效片段:

HTML:

    <div class='sidebar'>
        <div class='title'>Sonder</div>
        <ul class='nav'>
            <li><a class='active' href='members.php?view=<?=!empty($user)?:0?>'>Home</a></li>
            <li><a href='members.php' >Members</a></li>
            <li><a href='friends.php' >Friends</a></li>
            <li><a href='messages.php'>Messages</a></li>
            <li><a href='profile.php'>Edit Profile</a></li>
            <li><a href='logout.php'>Logout</a></li>
        </ul>
    </div>

CSS:

    .nav li a {
        position: relative;
        display: block;
        padding: 15px 15px 15px 50px;
        font-size: 12px;
        color: #eee;
        border-bottom: 1px solid #222;
        cursor: pointer;
    }
    .nav li a:before {
        font: 14px fontawesome;
        position: absolute;
        top: 14px;
        left: 20px;
    }
    .nav li:nth-child(1) a:before {
        content: '\f015';
    }
    .nav li:nth-child(2) a:before {
        content: '\f0c2';
    }
    .nav li:nth-child(3) a:before {
        content: '\f183';
        left: 23px;
    }
    .nav li:nth-child(4) a:before {
        content: '\f003';
    }
    .nav li:nth-child(5) a:before {
        content: '\f013';
    }
    .nav li:nth-child(6) a:before {
        content: '\f023';
        left: 22px;
    }
    .nav li a:hover {
        background: #444;
    }
    .nav li a.active {
        box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222;
        background: #444;
    }

脚本 block :

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
           setNavigation();
        });

        function setNavigation() {
            var path = window.location.pathname;
            path = path.replace(/\/$/, "");
            path = decodeURIComponent(path);

            $(".nav a").each(function () {
                var href = $(this).attr('href');

                if (path.substring(1, path.length) === href) {
                    $(".nav a").removeClass('active');
                    $(this).addClass('active');
                    return;
                }
            });
        }
    </script>

这应该可以正常工作。