js给循环中的li添加class="active"

1、首先在html中布局好两个按钮和一个div，如下图所示。

2、接着编写添加class的方法，如下图所示，通过classList中的add。

3、运行页面以后看到如下图所示的界面。

4、点击添加class按钮就可以看到div中多了样式。

5、接下来在编写移除class样式即可。

你好，问题出现在你的第15行样式上；

应该这么写：

#tab ul li.active{background:whitecolor:#000}

注意li.active之间没有空格。

希望能帮到你。

在V6版本以下，Link标签会有activeStyle属性或者activeClassName属性，这两个属性都可以设置router激活状态时Link的样式，即当前页面为Link所指页面时Link的样式。

但是，在V6中，使用这两个属性会出现报错如图，会提示找不到该方法。

报错

提示说可以把其中的大写改成小写，但是这个方法是错误的，并不能达到我们想要的效果。

解决

在V6中，已经删除了activeStyle属性以及activeClassName属性。官方给出了正确的向Link标签添加激活样式方法，可戳：custom-link-example

关键部分如下：

function CustomLink({ children, to, ...props }: LinkProps) {

let resolved = useResolvedPath(to)

let match = useMatch({ path: resolved.pathname, end: true })

return (

<div>

<Link

style={{ textDecoration: match ? "underline" : "none" }}

to={to}

{...props}

>

{children}

</Link>

{match &&" (active)"}

</div>

)

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

实际上就是自定义了一个函数CustomLink，然后通过useResolvedPath和useMatch去引入路径并判断当前页是否是该路径，若是，则match为true，相应的textDecoration赋上了 "underline"值；否则，textDecoration为“none”。

在我的项目中，我将官方代码稍作修改即可

import './css/style.css'

import sdulogo from "./img/sdulogo.png"

import * as React from "react"

import {

Link,

useMatch,

useResolvedPath,

} from "react-router-dom"

export default function Header() {

return(

<header id="header">

...

<nav id="navbar" className="navbar">

<ul>

{/*这里将Link改为CustomLink，其余不变*/}

<li><CustomLink to="/">首页</CustomLink></li>

<li><CustomLink to="/canvas">描摹</CustomLink></li>

</ul>

</nav>

...

</header>

)

}

function CustomLink({ children, to, ...props }) {

let resolved = useResolvedPath(to)

let match = useMatch({ path: resolved.pathname, end: true })

return (

<div>

{/*若当前为激活状态，则link颜色为黄色，否则不设置颜色*/}

<Link

style={{ color: match ? "#ffc107" : "" }}

to={to}

{...props}

>

{children}

</Link>

</div>

)

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

要注意几点：

在IDE中引用useResolvedPath和useMatch可能会有灰线提示：“Cannot resolve symbol ‘useMatch’”，不过不会影响实际运行

官方给的代码是TypeScript，我这里写的是JavaScript，没有太大的区别。主要是CustomLink函数的参数从{ children, to, ...props }: LinkProps改成{ children, to, ...props },且不需导入LinkProps。这其实是因为TypeScript的函数传递的参数需要指明参数的类型，也就是{ children, to, ...props }都是LinkProps类型的。

点击阅读全文

---