如果页面处于活动状态,则 gatsby 下划线链接 - Javascript

在 Gatsby.js 中创建下划线链接时，您可能希望在链接处于激活状态时以特定方式突出显示它。本文将介绍如何使用 JavaScript 在 Gatsby 中创建下划线链接。

创建下划线链接

要创建下划线链接，您需要使用 Gatsby 的 Link 组件。Link 组件会处理内部链接并使用 Gatsby 提供的优化进行内部页面之间的无缝导航。

要创建一个下划线链接，请使用以下代码：

import { Link } from "gatsby"

<Link to="/page-2/" activeClassName="underline">
  Go to page 2
</Link>

这里，我们将 activeClassName 属性设置为 "underline"，这要求我们在 CSS 中创建名为 "underline" 的类。

CSS 样式

我们接下来需要使用 CSS 来定义 "underline" 类的样式。我们将使用 text-decoration 属性为链接添加下划线，并使用 border-bottom 属性定义下划线的边框样式。此外，我们还将使用 transition 属性来添加平滑的动画效果。

/* styles.css */

.underline {
  text-decoration: none;
  border-bottom: 2px solid black;
  transition: all 0.2s ease-in-out;
}

.underline:hover {
  text-decoration: none;
  border-bottom: 2px solid blue;
}

在上述代码中，我们使用了 text-decoration: none; 以避免在链接状态发生变化时出现默认的下划线样式。transition 属性为链接的变化效果添加了一些平滑的过渡效果。

完整代码

现在我们已经定义了我们的链接样式，我们来看看完整的代码，包括 Link 组件。

import React from "react"
import { Link } from "gatsby"
import "../styles.css"

const IndexPage = () => {
  return (
    <div>
      <h1>Welcome to my website</h1>
      <Link to="/about/" activeClassName="underline">
        Go to About page
      </Link>
    </div>
  )
}

export default IndexPage

为了使下划线链接应用于此示例中的页面，我们需要在我们的 CSS 文件中包含上述 CSS 样式，并在需要应用样式的链接上使用 activeClassName 属性。

这样我们就完成了在 Gatsby 中创建下划线链接及其动态样式的教程。

返回结果

# 如果页面处于活动状态,则 gatsby 下划线链接 - Javascript

在 Gatsby.js 中创建下划线链接时，您可能希望在链接处于激活状态时以特定方式突出显示它。本文将介绍如何使用 JavaScript 在 Gatsby 中创建下划线链接。

## 创建下划线链接

要创建下划线链接，您需要使用 Gatsby 的 Link 组件。Link 组件会处理内部链接并使用 Gatsby 提供的优化进行内部页面之间的无缝导航。

要创建一个下划线链接，请使用以下代码：

```jsx
import { Link } from "gatsby"

<Link to="/page-2/" activeClassName="underline">
  Go to page 2
</Link>

这里，我们将 activeClassName 属性设置为 "underline"，这要求我们在 CSS 中创建名为 "underline" 的类。

CSS 样式

我们接下来需要使用 CSS 来定义 "underline" 类的样式。我们将使用 text-decoration 属性为链接添加下划线，并使用 border-bottom 属性定义下划线的边框样式。此外，我们还将使用 transition 属性来添加平滑的动画效果。

/* styles.css */

.underline {
  text-decoration: none;
  border-bottom: 2px solid black;
  transition: all 0.2s ease-in-out;
}

.underline:hover {
  text-decoration: none;
  border-bottom: 2px solid blue;
}

在上述代码中，我们使用了 text-decoration: none; 以避免在链接状态发生变化时出现默认的下划线样式。transition 属性为链接的变化效果添加了一些平滑的过渡效果。

完整代码

现在我们已经定义了我们的链接样式，我们来看看完整的代码，包括 Link 组件。

import React from "react"
import { Link } from "gatsby"
import "../styles.css"

const IndexPage = () => {
  return (
    <div>
      <h1>Welcome to my website</h1>
      <Link to="/about/" activeClassName="underline">
        Go to About page
      </Link>
    </div>
  )
}

export default IndexPage

为了使下划线链接应用于此示例中的页面，我们需要在我们的 CSS 文件中包含上述 CSS 样式，并在需要应用样式的链接上使用 activeClassName 属性。

这样我们就完成了在 Gatsby 中创建下划线链接及其动态样式的教程。