在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. Docker machine学习

    1. docker-machine 安装. From docker 官网 curl -L https://github.com/docker/machine/releases/download/v0. ...

  2. ThreadLocal源码解析及实战应用

    作者:京东物流 闫鹏勃 1 什么是ThreadLocal? ThreadLocal是一个关于创建线程局部变量的类. 通常情况下,我们创建的变量是可以被任何一个线程访问并修改的.而使用ThreadLoc ...

  3. Lectures

    Copy and Paste 3(P9523) Problem Solution 转移方程中的"父问题枚举子问题寻找转移"可以转成"子问题寻找父问题主动转移"处 ...

  4. package.json中^,~的详细说明

    场景描述 在package.json这个文件中,我们经常可以看见这样的信息 但是我们很少注意的是 版本前面的 ^ 到底是什么意思 今天我们就来讲一下(端好小板凳) "dependencies ...

  5. ABP-VNext 用户权限管理系统实战05----扩展授权类型（单点登录）

    一.适合场景: 1.我方系统在集成到别人的集成本台时一般是拿别的平台的用户名,在我方系统进行登录 2.我方系统是前后端分离,前端要拿到token 二.解决方案:自定义授权类型 我们知道Identity ...

  6. ABP vNext系列文章04---DynamicClient动态代理

    一.动态代理在ABP系统中的应用 1.它主要在做什么事件 之前开发系统想要在后台调用别的服务都是用HttpClient发起请求,在abp vnext中不需要我们这样做了, 你只要知道服务调用的接口方法 ...

  7. Pytest 源码解读 [1] - [pluggy] 核心设计理念浅读

    背景: Pytest 是一个功能强大的 Python 测试框架,它使用了一个名为 "pluggy" 的插件系统来扩展其功能.在 Pytest 的源码中,pluggy 模块负责实现插 ...

  8. 小白学k8s(5)k8s中的service

    k8s中的service service存在的意义 Pod与Service的关系 Port port targetPort nodePort IP Node IP Pod IP Cluster IP ...

  9. 4.2 Windows驱动开发：内核中进程线程与模块

    内核进程线程和模块是操作系统内核中非常重要的概念.它们是操作系统的核心部分,用于管理系统资源和处理系统请求.在驱动安全开发中,理解内核进程线程和模块的概念对于编写安全的内核驱动程序至关重要. 内核进程 ...

  10. Pdfium.Net.Free 一个免费的Pdfium的 .net包装器--PDF预览器框选

    项目地址: Pdfium.Net:https://github.com/1000374/Pdfium.Net PdfiumViewer:https://github.com/1000374/Pdfiu ...