代码之家 › 专栏 › 技术社区 › Drifter64

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

css html jquery javascript

Drifter64 · 技术社区 · 10 年前

我正在使用 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

common/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”。

2 回复 | 直到 10 年前

Tom Prats 10 年前

我不确定这是否真的是错的,但我注意到,在他们的示例中,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>

Multitut 10 年前

我对这些案例的处理方法如下:

为每个选项卡添加一个唯一的id(除了您已经拥有的类之外) 在每个特定文件(index.php、common.php、forum.php等)上,使用选定的选项卡创建一个对象:

var selected = $('#forumTab');

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

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