如何突出显示当前页面的菜单链接?

2023-11-29

这是一个非常常见的问题,但我找不到针对我的情况的任何解决方案。 我正在制作一个相当大的网站,有数百个页面,因此我创建了每个页面都相同的页眉页和页脚页。现在我想突出显示当前页面的菜单按钮,但我的菜单位于我在每个页面中包含的标题中<?php include("header.php");?>所以我尝试的一切都不起作用。 我试过这个method但仅当每个页面中都有菜单代码时才有效(因此不使用 php include)。 有什么建议么?

这是我的菜单栏的代码

nav {
    height: 40px;
    background: black;
    border-radius: 0 0 10px 10px;
}
#navblock {
    margin-left: 160px;  
}
nav ul{
    list-style: none; 
    position: relative; 
    display: inline-table;
    }
nav ul li{ 
    float: left; 
    font-size: 20px;
    }
nav ul li:hover {
    background: #666;
    }
nav ul li:hover a {
    color: #fff;
    text-decoration: none;
    }
nav ul li a {
    display:block; 
    padding-top: 6px; 
    padding-left: 30px; 
    padding-right: 30px; 
    padding-bottom: 6px; 
    text-decoration: none;
    color: white;
    }
nav ul ul {
    display: none; 
    background: #101010; 
    padding: 5px 5px 5px 5px;
    width: auto;
    position: absolute; 
    z-index: 1;
    top: 40px;}
nav ul li:hover > ul {
    display:block;
    }
nav ul ul li {
    float: none; 
    position: relative; 
    font-size: 14px; 
    margin-left: 0px;
    }
nav ul ul li a:hover {
    background: #666;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<nav>
    <div id="navblock">
        <ul>
            <li><a href="/index.html">Home</a></li>
            <li><a href="/anime/index.html">Anime</a>
                <ul>
                    <li><a href="/anime/listaepisodi.html">Lista episodi Anime</a></li>
                    <li><a href="/anime/episodio00.html">episodio00</a></li>
                </ul>
            </li>
            <li><a href="/serietv/index.html">Serie TV</a>
                <ul>
                    <li><a href="">Lista completa Serie TV</a></li>
                    <li><a href="">Cerca Anime</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </nav>

试试这个脚本..

var url = window.location;
$('a[href="'+url+'"]').parent('li').addClass('active');

希望这可以帮助..

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何突出显示当前页面的菜单链接? 的相关文章

  • jQuery/JavaScript“this”指针混淆

    当函数时 this 的行为bar被称为让我困惑 请参阅下面的代码 当从单击处理程序调用 bar 时 有什么方法可以将 this 安排为普通的旧 js 对象实例 而不是 html 元素 a class with a method functi
  • 角度材质表-表内边框

    I am using Angular material table and I want to set border inside the table Using CSS I was able to set border Normal ca
  • Opera Mobile 9.7 Beta 设置焦点 [重复]

    这个问题在这里已经有答案了 我们使用手持式扫描仪将物品移入和移出库存 扫描仪运行一个 ASP 页 该页提交表单以移动项目 我们最近购买了一台运行 Windows Mobile 6 1 的新扫描仪 很快就意识到 Mobile IE 完全没用
  • 显示带有 id 的内部连接的名称[重复]

    这个问题在这里已经有答案了 我有这个查询 select from countrysegments inner join country on countrysegments country id country id inner join
  • 使用 Laravel Socialite 登录 facebook

    然而 我是 Laravel 的新手 我正在遵循以下教程http www codeanchor net blog complete laravel socialite tutorial http www codeanchor net blog
  • 以编程方式将子节点添加到 jstree

    我正在尝试编写一些动态添加节点到 jstree 的代码 我已经关注了医生http www jstree com documentation crrm http www jstree com documentation crrm但无法获得一个
  • 当我尝试使用 jasmine 进行测试时,应用程序文件夹未在 Ext.appliation 中加载

    我正在尝试在我的应用程序 Ext js 5 中实现茉莉花以进行单元测试 为此 我创建了应用程序测试文件 Ext require Ext app Application Ext Loader setConfig enabled true Ex
  • 无法使用 Excel JavaScript API 设置 NumberFormat

    我正在使用 Excel Javascript API 在搜索文档后 仍然找不到我想要实现的解决方案 因此 我想将所有内容设置为数字格式 文本 这样 Excel 的自动格式设置就不会与任何单元格的内容混淆 不会删除前导零或更改日期格式 文档建
  • 在 JAX-WS 中使用安全性的最佳实践是什么

    这是场景 我有一些需要保护的 Web 服务 JAX WS 目前 为了身份验证需求 我提供了额外的 SecurityWService 它为授权用户提供了一些需要在请求其他服务时描述的 userid 和 sessionid 使用一些java安全
  • 单击行内的按钮时防止触发表行 onclick 事件

    我有一个带有 ONCLICK 事件的表行 切换下面的附加数据 在其中一个行单元格内有一个按钮 单击时执行 AJAX 操作 当我单击按钮时 行的 onclick 事件也会触发 并且会发生附加数据在 AJAX 调用完成之前出现 这对我来说是一个
  • 谷歌地图的灰度

    有没有什么方法可以在不丢失任何其他功能的情况下以灰度显示 Google 地图 通过 Javascript API 嵌入 是的 他们在 api V3 中引入了StyledMaps http code google com apis maps
  • 将 async 和await 与export const 一起使用

    我无法完成这项工作 它说 await 是一个保留字 是的 当然是 而且我想使用它 怎么了 export const loginWithToken async gt return dispatch gt dispatch type SESSI
  • 使用 Javascript 从 HTML 表格输入单元格获取值

    我使用 Javascript 动态创建了一个 HTML 表 其中第一列由文本字段组成 第二列由输入字段组成 第三列由文本字段组成 效果很好 nrOfRows document getElementById myId value get nr
  • 如何使弹出窗口溢出:在溢出内可见:自动上下文

    我有一个 div 列表 如果超过父框 overflow x 应该滚动 并且在悬停时 我想看到一个弹出窗口 我的问题是 如果我将鼠标悬停在任何子 div 上 弹出窗口将被考虑用于溢出计算 但我只想让它在所有内容之上可见 而不是使其扩展滚动区域
  • 带数字键的 Immutable.js 映射(包括性能测试)

    我在 React Native 应用程序中将 Immutable js 与 Redux 结合使用 元数据 例如查找表 是从服务器获取的 并作为 Immutable Map 保存在应用程序本地 查找值的键是整数 数据库中的主键 当我获取数据时
  • 无法使用python和beautifulsoup抓取网页中的某些href

    我目前正在使用 Python 3 4 和 bs4 爬取网页 以收集塞尔维亚在里约 2016 年的比赛结果 所以网址here http rio2016 fivb com en volleyball women teams srb serbia
  • CodeIgniter加入选择为

    我的数据库中有 2 个表需要加入 一张表是 artikelen 表 另一张表是 Collections 表 我目前有 this gt db gt select this gt db gt from collecties this gt db
  • 如何比较 JavaScript 表格中的单元格并测试是否相等? indexOf 是如何工作的?

    我在 HTML 代码中创建了一个表格 它有 9 列和 13 行 它被 JavaScript 循环完全填满 该循环用几个数组中的人名填充它 但是 我想添加一个验证步骤 确保一行中没有两个单元格具有相同的值 并且每个单元格的值不会在其正下方的单
  • 在 Chrome 扩展中使用页面的 Angular JS

    我有一个 HTML 页面 其中有一些使用 Angular 配置的 DOM 现在我正在构建一个 chrome 扩展来修改文本框中的值 element value newValue不起作用 因为文本框是用 Angular 设计的 在阅读了一些资
  • 使用 ASP.Net 和 Ajax 的登录页面

    我正在尝试使用 html ajax 和 ASP NET 制作登录页面 数据确实传递给 ajax 函数 但是当我调试 asp 页面时 用户名和密码以 NULL 发送 该代码应该获取用户名和密码 然后返回用户 ID html页面 div Use

随机推荐

  • Java 可以在不改变活动窗口的情况下显示对话框吗?

    我想在上面显示一个模式 进度 对话框Frame 即使那样Frame不是活动窗口 但是 显示对话框会导致该对话框或其所有者成为活动窗口 有没有一种方法可以显示对话框而不使其或其所有者成为活动窗口 特别是在 Windows 平台上 我想这样做的
  • 在 Spring MVC 应用程序中实现 Swagger 的“简单”方法

    我有一个用简单的 Spring 编写的 ReSTFul API 没有 Spring Boot 没有花哨的东西 我需要在其中实现 Swagger 到目前为止 互联网上的每个页面都让我抓狂 因为令人困惑的配置和臃肿的代码我根本找不到可移植性 有
  • ios13 防止下拉滚动到顶部的 tableView 来消除表单样式模态呈现的 viewController [重复]

    这个问题在这里已经有答案了 我有一个 tableViewController 它以默认的工作表样式呈现方式呈现 我想保留这种模式风格 因为它看起来不错并且在我的应用程序中运行良好 我喜欢下拉导航栏时的关闭 然而 我不想要的是下拉 table
  • 在snakemake规则的日志部分中定义的文件与在输出部分中定义的文件有很大不同吗?

    我认为的文档log蛇形规则的一部分 必须 手动 将内容发送到日志文件 在我看来 使用中定义的文件可以获得相同的结果output部分 这两种可能的方法之间的重要区别是什么 其真正的用处是什么log部分 对我来说 日志的最佳实践是 Snakem
  • 找到修剪周围空白的 svg viewbox

    假设我有一个绘制一些路径的 svg 我应该使用什么工具来找到一个完全适合这些路径的视图框 以便修剪周围的所有冗余空间 您只需将 svg 的 viewBox 设置为其边界框即可 function setViewbox svg var bB s
  • 如何设置像表格一样的选择选项样式?

    我有一个表单选择下拉菜单 我想格式化选项的内部文本 每个选项都有月份 年份和标题 我希望每个人都能相互协调 我尝试在选项元素内放置一个表格 看看是否可以强制它 但失败了 我尝试使用不间断空格 但也失败了 我相信是因为字母的字体系列样式 这是
  • Dockerfile 中的 VOLUME 是否在 kubernetes 中持久存在

    一些 Dockerfile 有一个VOLUME命令 当此类容器部署在 Kubernetes 中 但没有提供 kubernetes 卷 没有持久卷 PV 或持久卷声明 PVC 时 会发生什么情况 文件存储在哪里 音量是否持续 例如 Docke
  • (Java) Runtime.exec 中的文件重定向(双向)?

    我想执行这个命令 ceplinux work3 myName opt myCompany ourProduct bin EXECUTE THIS p cepamd64linux myCompany com 19021 ws1 project
  • 如何在开源 IDE (codelite) 中迁移到 C++ 11 [关闭]

    很难说出这里问的是什么 这个问题模棱两可 含糊不清 不完整 过于宽泛或言辞激烈 无法以目前的形式合理回答 如需帮助澄清此问题以便重新打开 访问帮助中心 我在Ubuntu QQ上使用CodeLite 5 1 默认情况下 根据之前安装的QQ等工
  • javascript 中数字数组的迭代返回字符串

    Why for i in 1 2 3 console log typeof i i 给出这个 Log string 0 Log string 1 Log string 2 我已经预料到了数字 Safari 7 0 9537 71 Mac O
  • Android:如何将页脚添加到全屏滚动视图?

    我希望页脚锚定在屏幕底部当且仅当它可以锚定在那里而不与任何其他视图重叠时 问题是我不知道有多少视图将添加到页眉或页脚 如果将页脚放在窗口底部会使其重叠 我想将页脚放在滚动视图的底部 也许可以将它添加到RelativeLayout中 并遵循它
  • 访问财产“文档”的权限被拒绝[重复]

    这个问题在这里已经有答案了 我在那里使用以下脚本 在我的页面上形成此脚本添加 iframe 我想获取 iframe html 问题是 iframe 中有内部 iframe Javascript 以下函数用于获取 iframe 的内容 doc
  • 在Python中使用运算符进行加法

    考虑 operator add a b 我无法理解这是做什么的 运算符类似于 那么什么是operator add a b 你会如何在程序中使用它 运算符功能让您可以选择操作动态地 他们和操作员做同样的事情 所以operator add a
  • Springboot swagger 与 JsonView

    可以将 swagger 与 JsonView 我有一个我使用的模型 JsonView只返回几个字段 但是swagger ui显示孔模型 这是我的模型 public class Intimacao extends EntityBase Emb
  • 使用 CSS/Javascript 将文本字段中的文本更改为点

    有没有一种方法可以 屏蔽 文本字段的输入 使其像密码字段一样 显示点而不是文本 而无需将文本框设置为密码类型 与 JavaScript 相比 我们更喜欢 CSS 有任何想法吗 这可能是您正在寻找的答案 webkit text securit
  • 操作系统时区更改tomcat需要重新启动

    我的 Web 应用程序在 Apache Tomcat 7 0 上运行 我们调用 java util calendar 来获取服务器日期时间 问题是 如果系统时区发生更改 java 日历将继续以 旧 时区的日期时间运行 Tomcat使用的JD
  • PHP 缓存控制似乎不起作用

    请看一下我的网站 vynora 事情还没有完成 我在 HTML 页面的顶部放置了一个 PHP 标头 当我访问 Google 的 pagespeed 时 它告诉我应该优化浏览器缓存 请看一下 谷歌页面速度 但我已经使用 PHP 做到了 那么这
  • MySQL 导出到 outfile:CSV 转义字符

    我有一个带有一些常见字段的时间表数据库表 id client id project id task id description time date 还有更多 但这就是要点 我连夜将该表导出到 CSV 文件 以便为用户提供数据备份 它还可用
  • ggplot2 中的自动非等距中断

    我创建了一个简单的散点图ggplot2并用颜色可视化 z 变量 require ggplot2 data data frame x runif 1000 y runif 1000 vis rf 1000 df1 1 df2 3 qplot
  • 如何突出显示当前页面的菜单链接?

    这是一个非常常见的问题 但我找不到针对我的情况的任何解决方案 我正在制作一个相当大的网站 有数百个页面 因此我创建了每个页面都相同的页眉页和页脚页 现在我想突出显示当前页面的菜单按钮 但我的菜单位于我在每个页面中包含的标题中所以我尝试的一切