<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. jquery跨域请求json数据

    //服务端生成json数据json.php <?php $json=array("Volvo","BMW","SAAB"); $cb ...

  2. ios之UILabel实现文本自适应方法

    UILabel实现文本自适应方法(ios7) - (void)initUserInterface { UILabel *label = [[UILabel alloc]init]; label.num ...

  3. 如何让aboboo 便携版在citrix下使用(aboboo在IPAD上使用)aboboo苹果版

    公司使用的是citrix的共享虚拟桌面.如何可以让aboboo在其下面运行呢? 网上有提供绿色版,但是总是弹出首次配置无法安装的报错界面. 察看帮助文档:http://www.aboboo.com/d ...

  4. 使用MyBatis Generator自动生成MyBatis的代码

    这两天需要用到MyBatis的代码自动生成的功能,由于MyBatis属于一种半自动的ORM框架,所以主要的工作就是配置Mapping映射文件,但是由于手写映射文件很容易出错,所以可利用MyBatis生 ...

  5. 【OI新闻】2016.10.06

    今天有人说好多OJ都狗记邓了- 翻了一下,恭喜以下OJ赢得大奖,获得狗记邓徽章一枚 一等奖Codevs 二等奖Bzoj 三等奖洛谷 后记-感悟 如果正在为OJ发愁的朋友,不要悲伤,不要心急,换一换OJ ...

  6. BZOJ_3280_小R的烦恼_最小费用最大流

    BZOJ_3280_小R的烦恼_最小费用最大流 Description 小R最近遇上了大麻烦,他的程序设计挂科了.于是他只好找程设老师求情.善良的程设老师答应不挂他,但是要 求小R帮助他一起解决一个难 ...

  7. Angular学习日记(一) 开发环境的搭建

    从看视频到自己尝试,总会走很多的弯路才能成功. 首先:装最新版的nodejs. 第一种:使用npm安装 首先设置taobao镜像,npm config set registry https://reg ...

  8. 解决 2003 Can’t connect to MySQL server on ‘localhost’ (10048)

    2003 Can’t connect to MySQL server on ‘localhost’ (10048)一般见于使用mysql的windows 2003服务器.错误的出现的原因: 第一种原因 ...

  9. http-2.2

    HTTP-2.2 httpd 配置文件的组成: grep "Section" /etc/httpd/conf/httpd.conf ### Section 1: Global En ...

  10. git回到没push的commit

    创建: 2017/10/28   merge master以后数据库出了问题,改好以后发现view有点问题,commit以后没提交就reset了.过后才想起来怎么回去???吓成狗,索性找到了下面这个. ...