如何在特定情况下突出显示活动导航选项卡

How to highlight active nav tab in specific case

本文关键字：活动 导航 选项 显示 在特定情况下      更新时间：2023-09-26

我将其用作JS的模板，该模板使用此API参考使用JQuery选择正确的导航。

我当前的代码：

索引.php

<html>
    <head>
        <title>ChillSpot Alpha 1.2.3</title>
        <link rel="stylesheet" type="text/css" href="common/style.css">
        <script type="text/javascript" src="common/jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="background.js"></script>
        <script type="text/javascript" src="common/navHighlight.js"></script>
        <script type="text/javascript"> $( document ).ready( getImage );</script>
        <script type="text/javascript"> $( document ).ready( setNavigation );</script>
    </head>
<?php
    include 'common/header.html';
?>
//More code, snipped from example: not relevant

常见/导航突出显示.js

<!--
function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/'/$/, "");
    path = decodeURIComponent(path);
    $(".menuList a").each(function () {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').removeClass('tab');
            $(this).closest('li').addClass('tab selected');
        }
    });
}
//-->

common/header.html 

        <div class="menu">
            <ul class = "menuList">
                <li class="tab"><a href="index.php">Home</a></li>
                <li class="tab"><a href="comm.php">Communications</a></li>
                <li class="tab"><a href="chillcraft/index.php">ChillCraft</a></li>
                <li class="tab"><a href="forum.php">Forum</a></li>
                <li class="tab"><a href="ud.php">Updates</a></li>
                <li class="tab"><a href="about.php">About</a></li>
            </ul>
        </div>
        <div class="content">

。这是行不通的。在我的情况下，导致示例失败的不同之处是什么？所有"li"元素都以类"tab"结尾，没有一个元素有"tab选择"。

我不确定这是否真的出了问题，但我确实注意到他们示例中的 href 都以 / 开头，而您的则不以 开头。 相对路径可能是您的路径不起作用的原因。

因此，如果您将html更改为此内容，则可能会很好：

<div class="menu">
    <ul class = "menuList">
        <li class="tab"><a href="/index.php">Home</a></li>
        <li class="tab"><a href="/comm.php">Communications</a></li>
        <li class="tab"><a href="/chillcraft/index.php">ChillCraft</a></li>
        <li class="tab"><a href="/forum.php">Forum</a></li>
        <li class="tab"><a href="/ud.php">Updates</a></li>
        <li class="tab"><a href="/about.php">About</a></li>        
    </ul>
</div>

我对这些情况的方法如下：

为每个选项卡添加一个唯一 ID（除了您已有的类之外）在每个特定文件（索引.php、通用.php、论坛.php等）上，使用您选择的选项卡创建一个对象：

var selected = $('#forumTab');

执行一个函数，确保从所有选项卡中删除活动类并将其仅添加到当前选项卡中：

$('.tab').removeClass('active');
selected.addClass('active');
相关文章：