在jquery中实现导航栏的切换只需要一行代码找到同级其他元素removeClass以及添加点击元素addClass就可以实现了，但是React没法直接找到同级元素，这个时候需要一点js中的思维，根据添加的序列号判断该添加哪种className

为了方便实例测试，这个我直接引用了菜鸟教程的在线文件，可以直接将代码粘贴运行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<style>
*{margin: 0;padding: 0;}
.change{background-color: #ff6637;float:left;width: 120px;height: 50px;;line-height: 50px;text-align: center;color: #fff;margin-right: 20px;}
.type{float:left;width: 120px;height: 50px;;line-height: 50px;text-align: center;color: #fff;margin-right: 20px;background-color: #2b2b2b;}
</style>
</head>
<body>
<div id="box" style="width: 100%;height:50px;background:#2b2b2b;"></div>
<script type="text/babel">
class Nav extends React.Component {
constructor(props){
super(props);
this.state={currentIndex:0};
}
setCurrentIndex=(event)=>{
this.setState({
//parseIndex()有两个参数，第二个参数表示被解析值的进制，并返回对应的十进制数
//event.currentTarget.getAttribute('index')，通过事件获取当前的序列号并将之转换为number
currentIndex: parseInt(event.currentTarget.getAttribute('index'), 10)
})
}
render(){
let content=["首页","关于我们","客户案例","新闻资讯","我们的团队","联系我们"];
let newContent=[];
for(let i = 0; i < content.length; i++) {
// key属性标识不同的元素，在元素不确定的情况下减少性能开销
//react在比较元素子元素是否相同的时候并不会精确查找元素具体的位置变动，只会在查到到不同之后对之后所有的元素全部执行一次dom更新操作。
//tree1
//<ul>
//<li key="1">1</li>
//<li key="2">2</li>
//</ul>
//tree2
//<ul>
//<li key="1">1</li>
//<li key="3">3</li>
//<li key="2">2</li>
//</ul>
//对于上述插入更新情况，React不会直接插入而是会移除第二个子元素再添加剩余元素但是如果加上key属性标识，会直接进行insert操作
newContent.push(<div key={i}
className={this.state.currentIndex === i ? 'change' : 'type'}        //判断当前更新的序列号是否相同，相同就更换className
index={i} onClick={this.setCurrentIndex}
>{content[i]}</div>);
}
return(
<div style={{width:"1200px",height:"50px",margin:"auto"}}>{newContent}</div>
)
}
}
ReactDOM.render(
<Nav />,
document.getElementById('box')
);
</script>
</body>
</html>

React实现导航栏点击高亮的更多相关文章

  1. phpcms 完美实现 导航栏当前栏目高亮

    我们在用phpcms做网站的时候,经常碰到导航栏高亮功能,或者侧栏高亮,这个会涉及到几个问题: .栏目列表页子栏目高亮判断,如果当前页面为子栏目,他的顶级栏目如果在导航栏也要高亮. .内容页高亮,这个 ...

  2. ios 导航栏 点击barbutton的按钮 下拉列表

    环境:xocde5.0.2+ios7.0.1 1.导航栏 ----点击科目--------下拉列表 代码:NGRightTableViewViewController.h #import <UI ...

  3. vue2实现tabs侧边导航栏点击内容跳转到对应位置，且内容滚动导航栏切换对应tab

    vue2实现tabs侧边导航栏点击内容跳转到对应位置,且内容滚动导航栏切换对应tab 1.tabs使用了 element的插件tabs, 省的自己写滑动动画 2.左侧有用到了 element的插件 N ...

  4. PHPCMS V9 导航栏当前栏目高亮

    实际上这个东西可有可无,很多站点看似导航栏当鼠标指向后都会变化等高亮处理,一般都比较醒目,但是实质点击过去后,都还是只是刚才的样式,因为这些站点的导航栏都没有对当前选中栏目做CSS的指定变化处理. 该 ...

  5. Bootstrap，导航栏点击效果修复（补）

    前言: 昨天晚上休息,忘记发博客了.对于学习这件是,还是需要坚持的.想想自建一个Jekyll博客模版还是很兴奋的,话不多说,看正文吧! 关于开发:  先看个Demo吧,点这里.你会发现,点击是没有效果 ...

  6. React Navigation 导航栏样式调整+底部角标消息提示

    五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...

  7. layui禁用侧边导航栏点击事件

    layui是一款优秀的前端模块化css框架,作者是贤心 —— 国内的一位前端大佬. 我用layui做过两个完整的项目,对她的感觉就是,这货非常适合做后台管理界面,且基于jquery,很容易上手.当然, ...

  8. react 路由导航栏 withRouter

    codesandbox https://codesandbox.io/s/9l6prnyxjy app.js import React, { Component, Fragment } from &q ...

  9. phpcms 导航栏点击栏目颜色定位方法和phpcms list页实现分页

    另:一个栏目下面如果没有子栏目,那么它调用的模板就是列表页模板(及list_为前缀的模板):如果一个栏目下面有子栏目,那么它调用的就是栏目首页模板(category_为前缀的模板). 当你这个栏目添加 ...

  10. phpcms 导航栏点击栏目颜色定位方法

    另:一个栏目下面如果没有子栏目,那么它调用的模板就是列表页模板(及list_为前缀的模板):如果一个栏目下面有子栏目,那么它调用的就是栏目首页模板(category_为前缀的模板). 当你这个栏目添加 ...

随机推荐

  1. java浅拷贝BeanUtils.copyProperties引发的RPC异常 | 京东物流技术团队

    背景 近期参与了一个攻坚项目,前期因为其他流程原因,测试时间已经耽搁了好几天了,本以为已经解决了卡点,后续流程应该顺顺利利的,没想到 人在地铁上,bug从咚咚来~ 没有任何修改的服务接口,抛出异常: ...

  2. node借助jsonwebtoken生成token以及验证token是否过期

    生成token使用 jsonwebtoken 插件 我当时使用的版本"jsonwebtoken": "^9.0.0", cnpm i jsonwebtoken ...

  3. NLP文本匹配任务Text Matching 有监督训练：PointWise（单塔）、DSSM（双塔）、Sentence BERT（双塔）项目实践

    NLP文本匹配任务Text Matching [有监督训练]:PointWise(单塔).DSSM(双塔).Sentence BERT(双塔)项目实践 0 背景介绍以及相关概念 本项目对3种常用的文本 ...

  4. 1.7 完善自定位ShellCode

    在之前的文章中,我们实现了一个正向的匿名管道ShellCode后门,为了保证文章的简洁易懂并没有增加针对调用函数的动态定位功能,此类方法在更换系统后则由于地址变化导致我们的后门无法正常使用,接下来将实 ...

  5. LeetCode刷题日记 2020/03/25

    力扣刷题继续! 题目:计算三维形体表面积 题干 在 N * N 的网格上,我们放置一些 1 * 1 * 1  的立方体. 每个值 v = grid[i][j] 表示 v 个正方体叠放在对应单元格 (i ...

  6. libuv计时器

    目录 1.uv_timer_t - 计时器句柄 2.API 2.1.uv_timer_init 2.2.uv_timer_start 2.3.uv_timer_stop 2.4.uv_timer_ag ...

  7. P7167 [eJOI2020 Day1] Fountain 题解

    题目链接:Fountain 很不错的基础算法组合题:单调栈+倍增 首先考虑到一个事实,就是下面第一个比当前半径大的位置会成为移动的第一次落脚点,抽象下就是下面出现的第一次比自身大的半径,这个问题显然可 ...

  8. 【译】.NET 8 网络改进（三）

    原文 | Máňa,Natalia Kondratyeva 翻译 | 郑子铭 简化的 SocketsHttpHandler 配置 .NET 8 添加了更方便.更流畅的方式来使用 SocketsHttp ...

  9. 开源.NetCore通用工具库Xmtool使用连载 - 随机值篇

    [Github源码] <上一篇> 详细介绍了Xmtool工具库中的散列算法类库,今天我们继续为大家介绍其中的随机值类库. 基于系统提供的Random获取随机值方法已经足够简单和易用,本类库 ...

  10. ARM指针寄存器——堆栈指针寄存器SP、程序计数器PC、连接寄存器LR详解

    堆栈的实现方法    在随机存储器区划出一块区域作为堆栈区,数据可以一个个顺序地存入(压入)到这个区域之中,这个过程称为'压栈'(push ).通常用一个指针(堆栈指针 SP-StackPointer ...