javascript - 如何在特定情况下突出显示事件导航选项卡

标签 javascript jquery html css

我正在使用 this作为 JS 的模板,它使用 JQuery 选择适当的导航,带有 this API 引用。

我当前的代码:

索引.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');
        }
    });
}

//-->

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 selected”。

最佳答案

我不确定这是否真的出了问题,但我确实注意到他们示例中的 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>

关于javascript - 如何在特定情况下突出显示事件导航选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28096082/

相关文章:

javascript - 为什么 localStorage 返回大小写为 null 且未定义的字符串值

javascript - Knockout.js 嵌套 foreach

javascript - 未调用简单 jQuery 函数

html - 为什么我的响应式背景图像在图像底部留下空白?

javascript - 将数组编号 2 和 3 访问到一个字符串数组中

javascript - 如何重命名 vuetify 数据表组标签?

javascript - Angular : Passing data back to my controller from a factory ajax call

jquery - 更改元素的 :after property in jQuery

html - Bootstrap 3 复选框与表单标签不对齐

python - Beautiful Soup 无法在 html 中找到所有图像标签(恰好在 5 处停止)