<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. Java String常见问题

    一.怎样推断两个String是否相等??使用"=="还是使用"equals()"? 对String来说."=="是用来推断两个字符串(对象) ...

  2. git log 常用选项

    git log 常用选项 -p 按补丁格式显示每个更新之间的差异. jiqing@Ubuntu:/home/wwwroot/default/5hao/sheep$ git log -p commit ...

  3. 【T^T 1871】获取敌情

    获取敌情 在公元4484年,人类展开了对外界星球的征途和探索,但也不可避免的展开了和外星人之间的战争.偶然的机遇之下,美国联邦调查局截获了一串来自外星球的信息.但不知道有什么特殊的意义.所以就委托你, ...

  4. [bzoj3073]Journeys

    https://www.zybuluo.com/ysner/note/1295471 题面 \(Seter\)建造了一个很大的星球,他准备建造\(N\)个国家和无数双向道路.\(N\)个国家很快建造好 ...

  5. bzoj 1026: [SCOI2009]windy数【数位dp】

    忘记limit不能记WA了一发-- 典型数位dp,变成work(r)-work(l-1),然后dfs的时候记录w当前位置,la上一个数选的什么,lm当前位是否有上限,ok当前位是否可以不考虑差大于等于 ...

  6. bzoj 1655: [Usaco2006 Jan] Dollar Dayz 奶牛商店【高精度+完全背包】

    居然要用高精度! 懒得operator了,转移是裸的完全背包 #include<iostream> #include<cstdio> using namespace std; ...

  7. robotframework - User key 操作

    一.用户关键字操作思路 a.创建model1资源 b.在model下创建用户关键字 - 循环 c.测试套件下创建test_case/case2 & 用户关键字 d.测试套件中导入Resourc ...

  8. webapp填坑记录

    网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...

  9. 微信小程序获取自定义属性值

    写小程序的时候用到了自定义属性,特地来记录一下 特别是这个坑,必须得说一说 wxml <view class='box' bindtap='getValue'> <view clas ...

  10. 基于.Net Core的API框架的搭建(4)

    6.加入日志功能 日志我们选用log4net,首先引入程序包: 选择2.0.8版本安装.然后在项目根目录新增log4net的配置文件log4net.config: <?xml version=& ...