“活动”类仅在使用页面扩展时设置

Question

如果我的导航栏在与导航栏匹配的页面上，我正在尝试使我的导航栏自动具有活动类...虽然另一个问题是我使用 htacess 重写了 URL，没什么大不了的，只是删除文件扩展名为了整洁。

以下代码的唯一工作方式是当我使用带有扩展名的 url 时。

var url = window.location.href;
$('ul.tdsnav a[href="' + url + '"]').parent().addClass('active');
$('ul.tdsnav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');

我的意思是…… MySite.com/index.php - 主页的导航项变为活动状态 MySite.com/index - 导航项保持活动状态

我也尝试了以下方法，但似乎没有用...

function getBaseName(url) {
        if (!url || (url && url.length === 0)) {
            return "";
        }
        var index = url.lastIndexOf("/") + 1;
        var filenameWithExtension = url.substr(index);
        var basename = filenameWithExtension.split(/[.?&#]+/)[0];

        // Handle '/mypage/' type paths
        if (basename.length === 0) {
            url = url.substr(0, index - 1);
            basename = getBaseName(url);
        }
        return basename ? basename : "";
    }

    var url = window.location.href;
    var url2 = getBaseName(url);
    $('ul.tdsnav a[href="' + url2 + '"]').parent().addClass('active');
    $('ul.tdsnav a').filter(function() {
        return this.href == url2;
    }).parent().addClass('active');

任何帮助将不胜感激。

编辑：

HTML：

<div class="sidebar" id="sidebar">
<div class="sidebar-inner slimscroll">
    <div id="sidebar-menu" class="sidebar-menu">
        <ul class="tdsnav">
            <li class="menu-title">
                <span>Main</span>
            </li>
            <li>
                <a href="index.php"><i class="fe fe-home"></i> <span>Dashboard</span></a>
            </li>
        </ul>
    </div>
</div>
</div>

Answer 1

您可以尝试使用“以选择器开头”：https://api.jquery.com/attribute-starts-with-selector/，这样您就不必完全匹配 URL，只需开头没有扩展名。

类似这样的：

function getBaseName(url) {
        if (!url || (url && url.length === 0)) {
            return "";
        }
        var index = url.lastIndexOf("/") + 1;
        var filenameWithExtension = url.substr(index);
        var basename = filenameWithExtension.split(/[.?&#]+/)[0];

        // Handle '/mypage/' type paths
        if (basename.length === 0) {
            url = url.substr(0, index - 1);
            basename = getBaseName(url);
        }
        return basename ? basename : "";
    }

    var url = window.location.href;
    var url2 = getBaseName(url);
    $('ul.tdsnav a[href^="' + url2 + '"]').parent().addClass('active');