<ul class="nav">
<li onClick={() => this.changeFontColor(0)} className={`${0 === this.state.active ? 'active' : ''}`}>点击1</li>
<li onClick={() => this.changeFontColor(1)} className={`${1 === this.state.active ? 'active' : ''}`}>点击2</li>
<li onClick={() => this.changeFontColor(2)} className={`${2 === this.state.active ? 'active' : ''}`}>点击3</li>
<li onClick={() => this.changeFontColor(3)} className={`${3 === this.state.active ? 'active' : ''}`}>点击4</li>
</ul> changeFontColor = (val) => {
this.setState({
active:val,
isShow:!this.state.isShow
}) }

  

react 导航切换的更多相关文章

  1. 【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件解说(13)

    ),请不要反复加群! 欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 该DrawerLayoutAndroid组件封 ...

  2. 微信小程序小技巧系列《一》幻灯片,tab导航切换

    作者:gou-tian 来自:github 幻灯片 使用微信小程序原生组件swiper实现. <swiper indicator-dots="{{indicatorDots}}&quo ...

  3. css实现导航切换

    css实现导航切换 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title>css实现导航切换&l ...

  4. vue2.0实现底部导航切换效果

    使用vue2.0写移动端的时候,经常会写底部导航效果,点击切换路由效果,实现图片和文字颜色切换.vue2.0也提供了很多ul框架供我们实现效果,今天就用原生的实现一个底部导航切换,直接上代码: 效果图 ...

  5. MUI底部导航切换子页面

    1.登陆页面进入之后,进入到main页面,main页面只有一个底部导航,然后引入子页面进行渲染. <nav class="mui-bar mui-bar-tab" id=&q ...

  6. vue实现首页导航切换不同路由的方式

    vue实现切换首页路由导航 ,根据切换的不同导航跳转不同的路由,以及当前选中的导航添加选中样式.  html代码: <nav> <!-- 导航栏 --> <div cla ...

  7. Mui 底部导航切换

    1.建好子模板目录 2.导航代码 <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" c ...

  8. jQuery页面滚动右侧浮动导航切换

    体验效果:http://hovertree.com/texiao/jquery/49/ 效果图: 代码如下: <!DOCTYPE html> <html> <head&g ...

  9. jQuery导航切换功能

    Css ------------------------------------------------------------------------------------------------ ...

随机推荐

  1. 【bzoj2003】[Hnoi2010]Matrix 矩阵

    首先可以知道,如果已知第一行和第一列的数,那么可以很容易的计算出其余的数.进一步的,如果笔算将每个数的表达式写出可以得出如下结论: 第i行的第j个数(i>1,j>1)只与(1,1),(i, ...

  2. MFC中SliderCtrl控件的使用

    在MFC中滑动条(CSliderCtrl)是个经常使用的控件,使用方法例如以下: 主要要方法有: 1.设置.取得滑动范围: void SetRange( int nMin, int nMax, BOO ...

  3. sa分析

    onCheckedChanged用于监控开启和关闭,其实是Switch,也是Toggle Buttons http://www.google.com/design/spec/components/sw ...

  4. POJ 2636:Electrical Outlets

    Electrical Outlets Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9597   Accepted: 718 ...

  5. ubuntu14安装docker-ce

    先卸载旧的docker sudo apt-get remove docker docker-engine docker.io docker-ce 通过HTTPS使用存储库(repository) su ...

  6. [loj6089]小Y的背包计数问题

    https://www.zybuluo.com/ysner/note/1285358 题面 小\(Y\)有一个大小为\(n\)的背包,并且小\(Y\)有\(n\)种物品. 对于第\(i\)种物品,共有 ...

  7. vue的学习网址

    Vue官网:http://cn.vuejs.org/v2/guide/index.html 淘宝镜像:http://npm.taobao.org/ Vue-router:https://router. ...

  8. gitlab调试

    Bundle complete! 104 Gemfile dependencies, 161 gems now installed.Gems in the groups development, te ...

  9. POJ 1659 Frogs' Neighborhood (贪心)

    题意:中文题. 析:贪心策略,先让邻居多的选,选的时候也尽量选邻居多的. 代码如下: #pragma comment(linker, "/STACK:1024000000,102400000 ...

  10. PCB 批量Word转PDF实现方法

    自上次公司电脑中毒带来的影响,导致系统自动生成的Word档PCB出货报告,通过公司邮件服务器以附件的方式发送给客户后,客户是无法打开或打开缓慢的现象,如果将Word档转为PDF后在客户端是可以正常打开 ...