React实现导航栏点击高亮

在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>

原文地址:https://www.cnblogs.com/toMe-studio/p/11391927.html

时间: 2024-10-12 05:58:22

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

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

环境:xocde5.0.2+ios7.0.1 1.导航栏 ----点击科目--------下拉列表 代码:NGRightTableViewViewController.h #import <UIKit/UIKit.h> @protocol PulldownMenuDelegate -(void)menuItemSelected:(NSIndexPath *)indexPath; -(void)pullDownAnimated:(BOOL)open; @end @interface NGRigh

web导航栏点击跳转后的样式

搭建web网页的导航栏时,需要有点击某导航页面跳转后,被点击的<a>标签样式添加或改变(bootstrap只能实现页面不刷新的点击效果),网上查阅了很多,终于解决了问题,豁然开朗的同时也小总结一下: ps:以下为摘录百度知道,并非本人原创,而我用的便是其中第二种方法. 方法有很多,大体可分为三种: 一.在服务器端判断当前页面隶属于哪一个分类,然后对其进行高亮化,这个高亮化的方法也有很多,相信不是你要的,不一一讲解: 二.每一个页面这个导航条都在各自的页面内,那么独立对其分配class或者行内样

PHPCMS V9 导航栏当前栏目高亮

实际上这个东西可有可无,很多站点看似导航栏当鼠标指向后都会变化等高亮处理,一般都比较醒目,但是实质点击过去后,都还是只是刚才的样式,因为这些站点的导航栏都没有对当前选中栏目做CSS的指定变化处理. 该方法实际是加入了个条件判断,用来识别当前页是否是主页还是栏目页. {pc:content action="category" catid="0" num="6" siteid="$siteid" order="listo

左侧竖条导航栏点击出现效果的实现

大部分的网站导航栏都是在网页的顶端,这类导航栏看起来非常一般,而有些在左侧竖着显示的导航栏就比较好看一些了,但是今天为大家介绍的是左侧竖条导航栏实现点击出现的效果,也就是刚开始只显示导航,不显示分类栏,而点击导航就可以显示分类栏了,下面一起来看下源代码的实现吧.<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="

织梦 循环二级导航栏 当前页面高亮样式

{dede:channelartlist typeid='30'} <a href="{dede:field name='typeurl'/}" {dede:field name=typeid runphp="yes"}(@me=="")? @me=" class='border' ":@me="";{/dede:field}>{dede:field name='typename'/}</

elementUI 导航栏点击之后改变背景色,背景色悬停

一开始设置的是: .menuLeft .el-menu-item:hover{ background: #6db6ff !important; } .menuLeft .el-submenu__title:hover { background: #6db6ff !important; } 但它只是hover事件,并不会使背景色悬停,一直存在.后来又设置了: .menuLeft .el-menu-item.is-active { background: #6db6ff !important; }

android 自定义组合控件 顶部导航栏

在软件开发过程中,经常见到,就是APP 的标题栏样式几乎都是一样的,只是文字不同而已,两边图标不同.为了减少重复代码,提高效率, 方便大家使用,我们把标题栏通过组合的方式定义成一个控件. 例下图: 点击: 如不设置左边,右边图片: 下面说一下具体实现步骤: 步骤一: 导航栏包括:* 返回按钮* 标题* 右侧按钮(功能不确定) 首先是布局文件,如下: </pre><p></p><pre name="code" class="java&q

Android 自定义组合控件 简单导航栏

最近在做项目的过程中,发现项目中好多界面的导航栏都很类似或者一样,但是每次都要重复写同样的代码,觉得很不爽,所以就简单地自定义了一下导航栏控件. 先上图: 导航栏包括: 返回按钮 标题 右侧按钮(功能不确定) 首先是布局文件,如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res

页面刷新跳转后,导航栏高亮显示跳转前的点击位置

需求:比如有一个二级或三四级的菜单栏,页面不跳转时实现高亮显示是很容易的,网上有很多这样的素材.但是页面一跳转,新页面可就记不住你在上一个页面点击的位置了,也就不可能高亮显示.并且很多时候,跳转后的页面菜单栏是后台动态生成的,也就是菜单栏栏目不固定,那么就不可能给菜单栏高亮效果写死.不知道这个事利用前后台交互去做会不会容易点,但是现在是要用纯前台实现. 实现原理一:这时候必须找个地方给它把点击的位置存起来,等页面跳转后,从那个地方把标记取出来,再给导航相应的位置做高亮处理就好了. 方法1:利用