react导航栏点击选中变色

最新推荐文章于 2023-02-14 10:44:26 发布
最新推荐文章于 2023-02-14 10:44:26 发布
阅读量3.3k 收藏 4
点赞数 6
文章标签： javascript react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37002224/article/details/105989358
版权
本文介绍如何在React应用中实现导航栏点击时选中项变色并进行页面跳转。通过在state中设置包含名称、activeColor属性和路径的navList1数组，利用map方法和浅复制更新被点击项的activeColor状态。
摘要由CSDN通过智能技术生成

1.导航可左右滑动
2.点击变色跳转
固定长度的导航栏，超过部分左右滑动
在这里插入图片描述
在这里插入图片描述
在state里面设置navList1数组对象，名称及控制变色的activeColor属性，跳转的路径path

	this.state = {
   
			navList1: [{
   
				id: 0,
				navName: '办公大楼A',
				path: '/ParkModal',
				type: 0,
				activeColor: false,
			}, {
   
				id: 1,
				navName: '办公大楼B',
				path: '/ParkModal',
				type: 0,
				activeColor: false,
			}, {
   
				id: 2,
				navName: '停车场',
				path: '/ParkModal',
				type: 0,
				activeColor:
最低0.47元/天 解锁文章
wendy-jin
关注
  • 6
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
React Native-导航条设置
Sunshine
12-11 2495
NavigatorIOS设置barTintColor后，颜色和实际颜色有差别1.使用NavigatorIOS控件设置导航条颜色<NavigatorIOS style = {BmacStyles.container} initialRoute={{ component: MainPage, title: '',
react实现点击变色小功能
qq_43373622的博客
02-24 4494
方法一：通过className添加类名的方式 当点击实现变色的时候，需要重新使用render函数进行渲染 <style> .isActive { background-color: red; } </style> <body> <div id="app"> </div> <script type="text/babel"> let arr = [1, 2, 3,
ul列表选中变色效果
热门推荐
yinkgh的专栏
09-07 1万+
本文讲解了如何动态生成ul列表，如何点击li改变本li样式
html中li框点中后变色,想要点击一个li标签的时候li背景颜色改变同时a字体变色...
weixin_29963537的博客
06-25 1555
小白师兄样式如下：li{ display: block; width: 100px; height: 40px; line-height: 40px; list-style: none; border: 1px solid #ccc; text-align: center; } li:hover{ back...
react入门-点击变色
HHHyyy123_的博客
02-14 873
react点击变色，react点击事件
react实现点击选中的li高亮的示例代码
08-27
React 实现点击选中的 LI 高亮示例代码 React 是一个流行的前端框架，用于构建用户界面。今天，我们将讨论如何使用 React 实现点击选中的 LI 高亮效果。在这个示例中，我们将创建一个简单的目录列表，并实现点击...
React响应导航栏
02-15
响应式应用程序导航栏 使用和构建 安装 1）克隆存储库 $ git clone https://github.com/randallmlough/react-responsive-navbar.git $ cd react-responsive-navbar 2）安装依赖项 $ yarn 3）预览/开发版本 $ yarn ...
Android开发之React Navigation 导航栏样式调整+底部角标消息提示
08-26
本文将深入探讨如何使用React Navigation进行导航栏样式的调整以及在底部导航栏添加消息角标。 首先，Android设备上的导航栏标题默认并不居中，与iOS的显示方式有所不同。为了使Android设备上的标题居中，我们需要...
ReactNative底部导航栏（带消息圆点）
11-10
在React Native应用开发中，创建一个功能丰富的底部导航栏是至关重要的，它为用户提供直观的界面切换。在本示例中，我们利用`react-native-scrollable-tab-view`库的`ScrollableTabView`组件，实现了底部导航栏的...
React Native之头部导航组件
02-23
本文将深入探讨"React Native之头部导航组件"，介绍如何利用React Native构建可自定义的头部导航栏，并建议将其与React-Navigator结合使用，以实现更加流畅的导航体验。 React Native是一个由Facebook开发的开源...
react-reactinputcolorReact的一个颜色选择器控件
08-15
react-input-color - React的一个颜色选择器控件
react-color-list:用于React的颜色列表管理器
05-27
React颜色列表 适用于React的完整调色板管理器 演示版 安装 React-Color-List作为。 // with npm npm install react-color-list 用法 import React, { useState } from " react " import ColorList from " react-color-list " function App() { const [colors, setColors] = useState([ " #bf4040 " , " #ab3f3f " , " #9f3737 " , " #8d3434 " , " #812929 " ]) return < ColorList colors={colors} xss=removed xss=removed> setColors(c)}
vue3.0简单实现点击li改变列表颜色
怎奈你何的博客
08-23 1197
vue点击改变列表颜色
react动态修改样式。react中点击那个li 那个li加颜色和地边框
weixin_43163869的博客
12-04 6542
<div style={{display:this.state.searchHouFlag?'block':'none'}}> <StyleObj.SearchHouText> { searchHouList?searchHouList.map((item,index)=>( ...
React + Antd实现动态切换主题功能
weixin_51232434的博客
06-13 1419
antd pro + react
Angularjs 左侧导航栏点击变色
tigerOrtiger的博客
12-23 415
Angularjs 左侧导航栏点击变色 写在前面 最近在做一个很小的项目，但是页面啥的都要求五脏俱全，页面标配–导航栏。要求做到点击左侧导航栏后，点击的元素变个色，不然用户自己不知道点了哪一个。也不知道当初脑子是想啥，选择用angularjs写整个项目的前端。【当事人:反正就是后悔】 原生的JS 实现这种很简单，只需要点击元素时，给当前元素添加样式即可，移除其他元素相同的样式。 查来一下angul...
微信小程序顶部导航栏点击选项产生颜色变化和底部下划线显示
Oblivision_Geek的博客
02-21 6228
在很多程序中都有一个功能，就是顶部导航栏点击的时候能自动切换页面，并且选中的模块会变换颜色并且底部出现一条横线。 首先思考这个功能的实现原理——通过“点击”这个动作，我们能知道点击的是哪一个模块，那这个模块一定有一个自己的唯一的信息，将这个唯一信息绑定一个特定页面，就能实现对应页面的跳转。而关于颜色的变换，本质上是模块样式的改变，所以一定是在wxss里面进行改变。所谓的改变，不是真的去修改原来样式的值，而是建立一种判断，当模块被点击时（获取到的唯一信息成立时），将这个模块对应到另一种样式设计，所以对一
Android底部导航栏切换界面，点击选项时文字和图标改变颜色
qll766的博客
10-21 6279
** 类似底部导航栏的菜单，点击图标，文字和图标都变颜色，Fragment切换界面详解 ** 先看效果图 以下是全部完整代码，如果有问题欢迎留言 图标和文字布局color_change.xml &amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&amp;gt; &amp;lt;LinearLayout xmlns:android=&quot;http:
react 中改antd中的颜色(注意: 这里使用的是css module)
MsimonBlowSnow的博客
02-03 2855
1.react 中修改antd中的颜色 1.首先找到你要修改颜色的颜色例如: 例如下图: 这是一个正常的使用antd中Buttom组件， 改变这个组件的样式 //若果使用的是css module 加载的话,你在less或sass中写，你会发现不会改变颜色，即使使用!important .ant-btn-primary{ color: #fff; background: red !important; border-color: red; text-shadow: 0 -
react修改按钮点击后变色
最新发布
05-19
你可以在 React 中使用 state 来实现按钮点击后变色的效果。首先，你需要在组件的 constructor 中初始化一个 state，例如： ``` constructor(props) { super(props); this.state = { clicked: false }; this....
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值