使用三元运算符导航，以将活动类设置为目录链接

三元运算符是一种简洁的条件表达式，用于根据条件选择两个不同的值。在前端开发中，它常用于动态设置元素的类名或其他属性。以下是使用三元运算符导航并将活动类设置为目录链接的详细解释和示例代码。

基础概念

三元运算符的基本语法是：

condition ? value_if_true : value_if_false;

如果 condition 为真，则返回 value_if_true，否则返回 value_if_false。

应用场景

在单页应用程序（SPA）或动态网页中，经常需要根据当前页面的URL或其他条件来设置导航链接的活动状态。活动状态通常通过添加一个特定的类（如 active）来表示。

示例代码

假设我们有一个导航菜单，包含几个目录链接，我们希望根据当前页面的URL来设置哪个链接为活动状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Example</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="/home" class="nav-link">Home</a></li>
            <li><a href="/about" class="nav-link">About</a></li>
            <li><a href="/contact" class="nav-link">Contact</a></li>
        </ul>
    </nav>

    <script>
        // 获取当前页面的URL路径
        const currentPath = window.location.pathname;

        // 获取所有的导航链接
        const navLinks = document.querySelectorAll('.nav-link');

        // 遍历每个导航链接，设置活动类
        navLinks.forEach(link => {
            // 使用三元运算符设置活动类
            link.classList.add(currentPath === link.getAttribute('href') ? 'active' : '');
        });
    </script>
</body>
</html>

解释

HTML部分：定义了一个简单的导航菜单，每个链接都有一个 nav-link 类。
CSS部分：定义了一个 .active 类，用于设置活动链接的样式。
JavaScript部分：
- 获取当前页面的URL路径。
- 遍历所有的导航链接。
- 使用三元运算符检查当前链接的 href 属性是否与当前页面的URL路径匹配。如果匹配，则添加 active 类；否则，不添加任何类。

优势

简洁性：三元运算符提供了一种简洁的方式来处理简单的条件逻辑。
性能：相比于传统的 if-else 语句，三元运算符在某些情况下可能更高效。
可读性：对于简单的条件判断，三元运算符可以使代码更加清晰和易读。

可能遇到的问题及解决方法

复杂条件逻辑：如果条件逻辑变得复杂，使用嵌套的三元运算符可能会使代码难以阅读和维护。在这种情况下，建议使用传统的 if-else 语句。
复杂条件逻辑：如果条件逻辑变得复杂，使用嵌套的三元运算符可能会使代码难以阅读和维护。在这种情况下，建议使用传统的 if-else 语句。
解决方法：
解决方法：
性能问题：在处理大量数据或频繁更新的DOM时，频繁使用三元运算符可能会影响性能。可以通过缓存结果或使用更高效的方法来优化。
解决方法：
解决方法：

通过以上方法，可以有效地使用三元运算符来设置导航链接的活动状态，并解决可能遇到的问题。

使用三元运算符导航，以将活动类设置为目录链接

我的所有页面都在目录中，并且都命名为index.php 我使用独立的模块，每个模块都在自己的目录中，所以它们可以放到任何web应用程序中。链接和URL以："directory_name/“结尾。basurl()；是一个简化链接的函数。

浏览 19提问于2019-01-29得票数 0

2回答

使用JavaScript三元运算符的CSS规则

、、、

如何使用javascript三元运算符where将条件设置为jquery变量"my_color“<script type="text/javascript">});如上所述，我的类以"my_color"

浏览 9提问于2013-01-31得票数 2

回答已采纳

2回答

编写ngClass条件的更好方法

、、

我正在尝试想一种更简洁的方式来写这个条件：所以image.property有时可能是空的，我正在尝试处理它...我知道我遗漏了一些明显的东西，但不知道是什么。任何帮助都非常感谢

浏览 22提问于2020-07-30得票数 0

回答已采纳

2回答

简单三元操作符抛出意外错误消息

、、

我有一个React应用程序，它包含到子路由的链接，我使用子域/路径来填充每个细节页面上的支持。换句话说，当用户导航到页面时，我使用pathname填充页面标题和内容等内容。其中一个页面/路径包含一个通常用上骆驼大小写( "SoCal“)编写的名称/标题，因此我使用以下代码，该代码包含一个三元操作符，该运算符确定是否为location = "socal"，如果有，则希望将lo

浏览 0提问于2020-08-24得票数 1

回答已采纳

2回答

在悬停之前，IE7不会从导航中移除活动状态

、、

这是怎么回事:单击主导航中的一个项目(顶部的五个链接)会给该项目一个“活动”类，当你单击不同的项目时，它会从那个活动类中删除活动类，并将其添加到新的活动类中。显然，这个活动类用于设置导航链接的样式，让您知道自己所在的位置。然而，在IE7中，单击导航中的不同链接并不会从先前活动</em

浏览 2提问于2009-10-16得票数 0

回答已采纳

3回答

使用具有可选URL参数的react路由器链接设置活动类

、

如何为包含可选参数的路径设置链接的活动类名？我的应用程序中的路由有一个包含可选URL参数的路径- eventId： <Link to="/sendInvite" activeClassName="active"

浏览 0提问于2016-08-24得票数 2

回答已采纳

2回答

我对后端编程和构建我的第一个全栈项目以及第一次使用Express/Mongoose/Mongo和Passport.js都很陌生。我已经建立了“登录与Github”的功能，并有一切与护照设置。现在，我想使用Redux来存储用户是否登录。如果用户已登录，我想更改我的导航栏，即如果用户未登录，则一个链接显示“登录”，但如果用户已登录，则“登录”链接将更改为“配置文件”。我知道我可以在React组件中使用三元运算

浏览 1提问于2019-05-30得票数 0

3回答

使用css和c#以编程方式更改主页中的链接

、、、

有谁知道如何在子页中以编程方式更改主页中链接的ccs吗？例如，我的主页中有(导航)链接列表，如下所示： <a href="report.aspx" class="list-group-item</a> <a href="irish_responses.aspx" class="list-group-item&q

浏览 0提问于2013-12-04得票数 3

回答已采纳

1回答

将父NavLink显示为React路由器V6中的活动

、、

<NavLink>为导航组件中的当前页面设置活动类：如果我导航到Details页面，一切都会如愿以偿。该nav项和父Companies nav项都是活动的。如果导航到Users

浏览 3提问于2022-08-31得票数 1

2回答

如何添加`ngFor` `循环中的类名？*

、、

</div> </li>我正在尝试如果循环中有一个大小，添加size作为类名如何将数据本身添加为具有现有类的类名？

浏览 1提问于2018-05-26得票数 1

回答已采纳

1回答

在Silverlight中设置数据模板内超链接按钮的样式

如何更改数据模板中超链接按钮的可视状态？基本上，我尝试遍历超级链接按钮，并根据当前的url将它们的可视状态设置为活动或非活动。超链接按钮位于itemscontrol的数据模板内。itemsource绑定到一个列表，其中link是我的自定义链接类，它只包含uri和标题的一些属性。有没有在silverlight导航应用程序中设置活动超链接样式的最佳实践？我使

浏览 0提问于2010-05-14得票数 0

回答已采纳

6回答

条件运算符？

、、、

我知道三元运算符。但上面并不是这样的。PaidDate = ( paidDate == null ? DateTime.Now : paidDate);

浏览 3提问于2013-04-02得票数 3

回答已采纳

1回答

使用jQuery在导航药丸上激活类

、

我有一个我正在工作的网站，我正在使用bootstrap 4的导航药丸设置。我想在点击时为我有两个链接添加活动状态，这两个链接使用手风琴将内容放入视图中。我正在使用以下jQuery：这在点击和切换时工作得很好，这取决于你点击的是哪个选项卡，但它总是在其中一个链接上保持活动，这意味着你不能摆脱活动的<

浏览 18提问于2019-12-03得票数 1

回答已采纳

1回答

将自定义属性映射到组

、

我正在尝试将另一个应用程序使用的自定义SAML属性映射到一个组。本质上，我们有3个角色，我们的想法是让3个AD组与每个角色捆绑在一起。根据中的答案，我认为这不是直接可能的。根据这个建议，我尝试使用嵌套的三元操作符为应用程序设置一个自定义配置文件映射，以模仿3if语句来设置属性。然而，虽然三元运算符可以工作，但在创建“属性语句”部分时，让映射工作就不能了。如果可能的话，我不希望为3个不同的角色创建3

浏览 4提问于2016-02-25得票数 0

3回答

如何在每个子组件上取消活动类，同时将其设置为已单击的子组件的活动类

、、、

当我单击B时，我试图在子组件B上设置一个活动类，同时禁用子组件A上的活动类。到目前为止，我已经尝试在父类中使用钩子，在父类中，通过使用setActive('');取消对所有子程序的活动支柱，然后通过使用e.currentTarget.className === 'link--activee.currentTarget.className = '' :

浏览 2提问于2019-05-02得票数 0

回答已采纳

3回答

三元运算符在第一次呈现后导致未定义的useState

、、、

我遇到了一个汉堡式侧边栏的下拉功能的问题-我想使用onClick来显示和隐藏导航栏链接。我试图通过给我的导航栏的className (在我的代码中是.nav_links)提供一个ID，它将使用showLinks钩子和三元运算符从“隐藏”变为“显示”。但是，在第一次呈现之后，div中的三元运算符之后的初始值被设置为undefined，因此我的onClick方法不起作用。

浏览 2提问于2021-07-30得票数 0

7回答

Jquery添加类并在重新加载页面时保留

、、、、

我有一个简单的导航菜单。主链接有一个下拉活动类。我需要这样做:当用户按下例如文章链接时，jquery必须从Home中删除下拉活动类，并将该类设置为选定的链接。我知道我可以使用removeClass和addClass，但是在重新加载页面时，我需要保留所选的链接类。我听说过用来设置类的cookie和本地存储，但我不知道如何设

浏览 3提问于2015-01-10得票数 3

回答已采纳

4回答

基于URL的主动导航

、、

我的导航菜单如下所示<ul><li><a href="localhostadmin/theme">Layout</a></li> <li><a href="localh

浏览 0提问于2015-01-07得票数 2

回答已采纳

1回答

React路由器:基于散列的NavLink

、、

我正在尝试使用React Router的NavLink组件创建一个导航栏，该导航栏基于页面的散列显示活动链接。这就是我所拥有的：<NavLink to="#about">About</NavLink> 无论散列是什么，这两个链接都有active类。如何根据当前散列将链

浏览 0提问于2020-03-25得票数 1

1回答

在razor视图中使用三元运算符时测试多个条件(Else if)

、、、、

我有一个umbraco页面的列表集合，我想遍历检查bool属性是否为true，如果是，我想将一个特定的类应用到divif package.GetPropertyValue<bool>("test") <div class="test1"><

浏览 2提问于2016-04-02得票数 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

使用三元运算符导航，以将活动类设置为目录链接

基础概念

应用场景

示例代码

解释

优势

可能遇到的问题及解决方法

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐