css 在活动链接上响应导航栏更改背景

lawou6xi 于 2022-11-26 发布在其他

关注(0)|答案(3)|浏览(132)

嘿，我刚刚开始学习React，对HTML、CSS和JavaScript有很好的了解。如果是活动链接，我无法让此导航栏改变颜色。我尝试了几种不同的方法，但都不起作用。我有我想要的布局，我只是不知道我是否写错了JSX代码，但任何帮助或提示都将是惊人的，谢谢。
用于导航栏的React JSX代码

import React from "react";
import { Link } from "react-router-dom";

import "./NavBar.scss";

const NavBar = () => {
  return (
    <ul class="tab-bar">
      <Link to="/" className="tab">
        <li>Flash Cards</li>
      </Link>
      <Link to="/sets" className="tab">
        <li>Sets</li>
      </Link>
      <Link to="/new" className="tab">
        <li>New</li>
      </Link>
      <Link to="/about" className="tab">
        <li>About</li>
      </Link>
      <Link to="/login" className="tab">
        <li>Login</li>
      </Link>
    </ul>
  );
};

export default NavBar;

导航栏的SCSS

$primary-color: #0f9b8e;
$secondary-color: #343837;
$tertiary-color: #03719c;

body {
  background: $secondary-color;
}
.tab-bar {
  margin: 0px;
  padding: 0px;
  display: flex;
  list-style-type: none;
}

.tab {
  width: 100%;
  padding: 20px 0;
  background: $primary-color;
  color: white;
  overflow: hidden;
  text-align: center;
  flex-grow: 1;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}

.tab:hover,
.tab:active {
  background: $tertiary-color;
}

css

来源：https://stackoverflow.com/questions/61552813/react-navigation-bar-change-background-on-active-link

3条答案

按热度按时间

ibps3vxo1#

除使用状态外，其他选项包括：

**1）只需使用NavLink**和activeClassName，它会自动读取url并根据您的url路径名调整样式

<NavLink activeClassName="active" className={"tab"} to="/contact">Contact</NavLink>

2）使用useHistory hook读取当前url并动态调整样式

...
const currentRoute = useHistory().location.pathname.toLowerCase();
...
<Link className={currentRoute.includes("home") ? "tab active" : "tab"} to="/home"> 
 Home
</Link>
...

code sample (in the codesandbox)的工作副本

完整代码片段

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { useHistory, NavLink } from "react-router-dom";
import "./styles.scss";
const Nav = props => {
  const currentRoute = useHistory().location.pathname.toLowerCase();
  return (
    <div className="tab-bar">
      <Link
        className={currentRoute.includes("home") ? "tab active" : "tab"}
        active
        to="/home"
      >
        Home
      </Link>
      <Link
        className={currentRoute.includes("about") ? "tab active" : "tab"}
        to="/about"
      >
        About
      </Link>
      <NavLink activeClassName="active" className={"tab"} to="/contact">
        Contact
      </NavLink>
    </div>
  );
};

export default Nav;

赞(0）回复(0）举报 2022-11-26

3b6akqbq2#

import React, {useState} from "react";
    import { Link } from "react-router-dom";

    import "./NavBar.scss";

    const NavBar = () => {

  const [currentLink, setCurrentLink] = useState('');

  let background = {};
  switch(currentLink){
  case 'flash':
   background= { backgroundColor: 'red'};
   break;
  case 'sets':
   background= { backgroundColor: 'blue'};
   break;
  case 'new':
   background= { backgroundColor: 'green'};
   break;
  case 'about':
   background= { backgroundColor: 'yellow' };
   break;
  case 'login':
   background= { backgroundColor: 'cyan'};
   break;
  default:
   background = {}
}

  return (
    <ul class="tab-bar" style={background}>
      <Link to="/" className="tab" onClick={() => setCurrentLink('flash')}>
        <li>Flash Cards</li>
      </Link>
      <Link to="/sets" className="tab" onClick={() => setCurrentLink('sets')}>
        <li>Sets</li>
      </Link>
      <Link to="/new" className="tab" onClick={() => setCurrentLink('new')}>
        <li>New</li>
      </Link>
      <Link to="/about" className="tab" onClick={() => setCurrentLink('about')}>
        <li>About</li>
      </Link>
      <Link to="/login" className="tab" onClick={() => setCurrentLink('login')}>
        <li>Login</li>
      </Link>
    </ul>
  );
};

    export default NavBar;

这样就行了

赞(0）回复(0）举报 2022-11-26

qjp7pelc3#

首先，在css中创建以下类：

.activeLink{
 background: $tertiary-color;
}

现在，创建一个变量，其中包含您希望在链接处于活动状态时应用的类，如下所示：

let ActiveLink = 'activeLink'

然后将以下内容添加到NavLink：

<NavLink to='/home'
className = {({isActive}) => isActive? ActiveLink: 'tab' >

Home
</NavLink>

那应该可以了。

赞(0）回复(0）举报 2022-11-26

我来回答

css 在活动链接上响应导航栏更改背景

3条答案

相关问题

热门标签

最新问答