繁体   English   中英

突出显示当前和上一级 URL

[英]Highlight current and up-one-level URL

提示:本站为国内最大中英文翻译问答网站,提供中英文对照查看,鼠标放在中文字句上可显示英文原文

我有一个导航链接列表。 当我在某个页面上时,应突出显示该导航链接。 我还希望页面向上(仅)一个级别也突出显示其导航链接,因此:

All pages: /blogs, blogs/careers, blogs/authors

Page: /blogs/author
Highlight: /blogs/author, /blogs

Page: /blogs/author/Lauren-Stephenson
Highlight: /blogs/author/Lauren-Stephenson, blogs/authors

我是这样做的:

import React from 'react';

const navlinks = ["/blogs", "blogs/careers", "blogs/authors"]
const currentPath = "/blogs/authors/Lauren-Stephenson"

export function App(props) {
  return (
    <div className='App'>
     {navlinks.map((links) => 
       <div style={{color: currentPath.includes(links) ? 'green' : 'white'}}>{links}</div>
     )}
    </div>
  );
}

但是我的代码不仅高亮了/blogs/Authors/ ,它还高亮了/blogs ,这是不正确的,因为我只想高亮上一级的页面。

我怎样才能做到这一点?

所以也许添加这个条件可能会对你有所帮助!

style={{color: currentPath.includes(links) && currentPath.length!==links.length ? 'green' : 'white'}}

它将确保它不一样,如果不是这种情况,您可以根据需要将它从等于更改为 < 或 >

问题未解决?试试本站强大的搜索功能,搜索: 突出显示当前和上一级 URL
使用一个站点地图突出显示当前页面

[英]Highlight current page with one sitemap

我有一个sitemap.php,每个页面都包含“ &lt;?php include 'sitemap.php'; ?&gt; ”。 在我做这个之前,我在每个HTML或PHP站点都有这个站点地图。 所以现在:我想保留这个单独的php文件,但是,如果用户点击链接,他将被重定向到的这个网站现在 ...

单页网站 - 导航突出显示当前部分

[英]One Page Website - Navigation Highlight Current Section

我在集成导航栏时遇到问题,导航栏突出显示当前在网站上查看的部分。 我只是希望当前查看的部分在导航栏中显示为粗体。 这是codepen : HTML ...

窗口位置向上一级

[英]Window location one level up

这是我的情况: 我的网页在文件夹中: http://www.example.com/example/index.html 我的文件夹中有媒体文件(一级): http://www.example.com/media/ 并且此文件在index.html中链接为:'../ ...

jQuery向上一级和.find()

[英]jQuery up one level and .find()

我正在学习jQuery,选择器有这个小问题。 这是我的DOM结构: 好。 它是一个简单的清单,与我的作品有很多联系。 每个项目都有其说明,并在轮播上带有一些图片。 当我单击链接时,我想在jquery中创建一个获取轮播的变量。 我写这个,但不起作用: 感谢帮助! ...

如何重定向到上一级?

[英]How to redirect to one level up?

params.php params.php和minw.php路径是localhost/x1/params.php或minw.php 。 params.php包含在stone.php ,而stone.php路径是localhost/x1/mem/stone.php 。 因此,我 ...

自动突出显示当前网址(即使在/ page / x上)

[英]Automatically highlight current url (even when on /page/x)

我正在尝试自动向菜单中的URL添加“当前”类,并且已经成功使用了此代码。 我想让它在分页上工作,因此,如果/ page / x出现在a href的URL后面,则会添加当前内容。 当前,它仅突出显示URL是否完全相同。 我已经做了一些搜索,但是似乎看不到该怎么做。 我非常感谢 ...

在表单中按回“一级”

[英]Button back “one level up” in form

我有一个“重置”按钮,可以将您带到表单的开头。 我应该为按钮“ back”(由一个级别支持)进行哪些更改? 小提琴 ...

Extjs 上一级图标目录

[英]Extjs one level up icons directory

我们在 c++ 中有一个现有的图标目录,我们也希望将其用于我们的 extjs 应用程序。 根据我们的要求,我们希望图标目录位于 Extjs App 目录之外。 所以我提到了我的图标,如下所示。 按钮配置示例: 但该图标在 html 中不可见。 在开发工具中,它显示为: 单击链接后,它转到: 这是不正 ...

使用jQuery将children元素向上移动一级

[英]Move children elements up one level with jQuery

我试图将一个导航元素提升到一个级别,所以我最终会得到类似的东西: 至 我一直在尝试使用unwrap(); 没有成功。 不完全确定原因。 ...

JS重定向页面一级

[英]JS redirect page up one level

我有一个简单的问题,下面我的JS功能是如果使用iPad打开则重定向页面。 我有一个页面mobile.abc.com,现在我要做的是重定向,如果使用ipad打开到mobile.abc.com 我尝试了那个JS,但它显示错误的URL:abc.com/mobile.abc.com ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2023 STACKOOM.COM