Question

我使用this作为JS的模板，使用JQuery选择正确的导航，并使用this API参考。

我目前的代码：

的index.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

公共/ navHighlight.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');
        }
    });
}

//-->

公共/了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">

......这不起作用。我的情况有什么不同导致示例失败？所有＆＃34; li＆＃34;元素以类＆＃34; tab＆＃34;结尾，没有选择＆＃34;选项卡＆＃34;。

Answer 1

我不确定这实际上是不是错了，但我注意到他们示例中的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>

Answer 2

我对这些案件的处理方法如下：

为每个标签添加唯一ID（除了您已有的课程）在每个特定文件（index.php，common.php，forum.php等）上创建一个包含所选选项卡的对象：

var selected = $('#forumTab');

执行一项功能，确保从所有标签中删除活动类，并将其仅添加到当前标签中：

$('.tab').removeClass('active');
selected.addClass('active');

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

2 个答案: