<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. Android性能測试 一些适用于Android Studio的代码审查和性能測试工具

    导言: Android应用在CPU占用,内存消耗方面的性能指标是影响产品质量的重要因素,因为QQ管家,360手机助手等应用都提供直观的内存消耗,流量监控功能,致使用户比以往更加关注软件的性能,并以此进 ...

  2. WWDC笔记:2013 Session 201 Building User Interfaces for iOS 7

    Text Dynamic Type Specifies fonts semantically Supports user text sizing Optimized for legibility Su ...

  3. busybox的使用

    1 将busybox设置为静态链接,放在文件系统中使用 make menuconfig的时候,Busybox Settings --> Build Options --> Build Bu ...

  4. web metrics dashboard 数据分析工具 看板 从可视化发现问题 避免sql重复写 调高效率

    <?php$todo = array();$done = array();$h = array();$v = $all['v'];$l = count($v);#19700101 08for ( ...

  5. mysql_connect 等待时间长,修改连接地址为127.0.0.1即可

    程序搬家后,运行非常慢分析流程: 1.外网的等待时间太长 2.内容等待时间也很长 3.断点查到仅仅一句 mysql_connect ("localhost",***,***)就要1 ...

  6. Ubuntu16.04下搭建开发环境及编译tiny4412 Android系统【转】

    本文转载自:http://blog.csdn.net/songze_lee/article/details/72808631 版权声明:本文为博主原创文章,未经博主允许不得转载. 1.安装ssh服务器 ...

  7. 【Silverlight】Bing Maps学习系列(五):绘制多边形(Polygon)图形(转)

    [Silverlight]Bing Maps学习系列(五):绘制多边形(Polygon)图形 Bing Maps Silverlight Control支持用户自定义绘制多边形(Polygon)图形, ...

  8. luogu 3371 【模板】单源最短路径

    我太菜了 今天才学会堆优化的dij #include<iostream> #include<cstdio> #include<algorithm> #include ...

  9. 【HDU 1588】 Gauss Fibonacci

    [题目链接] 点击打开链接 [算法] 要求 f(g(0)) + f(g(1)) + f(g(2)) + ... + f(g(n-1)) 因为g(i) = k * i + b 所以原式 = f(b) + ...

  10. POJ1264 SCUD Busters 凸包

    POJ1264 有m个国家(m<=20)对每个国家给定n个城镇 这个国家的围墙是保证围住n个城镇的周长最短的多边形 必然是凸包 进行若干次导弹发射 落到一个国家内则国家被破坏 最后回答总共有多少 ...