react 导航切换
<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 导航切换的更多相关文章
- 【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件解说(13)
),请不要反复加群! 欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 该DrawerLayoutAndroid组件封 ...
- 微信小程序小技巧系列《一》幻灯片,tab导航切换
作者:gou-tian 来自:github 幻灯片 使用微信小程序原生组件swiper实现. <swiper indicator-dots="{{indicatorDots}}&quo ...
- css实现导航切换
css实现导航切换 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title>css实现导航切换&l ...
- vue2.0实现底部导航切换效果
使用vue2.0写移动端的时候,经常会写底部导航效果,点击切换路由效果,实现图片和文字颜色切换.vue2.0也提供了很多ul框架供我们实现效果,今天就用原生的实现一个底部导航切换,直接上代码: 效果图 ...
- MUI底部导航切换子页面
1.登陆页面进入之后,进入到main页面,main页面只有一个底部导航,然后引入子页面进行渲染. <nav class="mui-bar mui-bar-tab" id=&q ...
- vue实现首页导航切换不同路由的方式
vue实现切换首页路由导航 ,根据切换的不同导航跳转不同的路由,以及当前选中的导航添加选中样式. html代码: <nav> <!-- 导航栏 --> <div cla ...
- Mui 底部导航切换
1.建好子模板目录 2.导航代码 <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" c ...
- jQuery页面滚动右侧浮动导航切换
体验效果:http://hovertree.com/texiao/jquery/49/ 效果图: 代码如下: <!DOCTYPE html> <html> <head&g ...
- jQuery导航切换功能
Css ------------------------------------------------------------------------------------------------ ...
随机推荐
- [Java] 监控java对象回收的原理与实现
监控Java对象回收的原理与实现 一.监控Java对象回收的目的 监控Java对象是否回收的目的是:为了实现内存泄露报警. 内存泄露是指程序中对象生命周期(点击查看详情)已经进入不可见阶段,但因为编码 ...
- c# 钩子
1.setWindowsHookex详解 http://blog.csdn.net/mmllkkjj/article/details/6627188 函数功能:该函数将一个应用程序定义的挂钩处理过程安 ...
- 展开阅读全文 js 爬虫操作
from selenium import webdriver import time import random from bs4 import * browser = webdriver.Chrom ...
- YTU 2520: 小慧唱卡拉OK
2520: 小慧唱卡拉OK 时间限制: 1 Sec 内存限制: 128 MB 提交: 478 解决: 207 题目描述 小慧唱歌非常好听,小鑫很喜欢听小慧唱歌,小鑫最近又想听小慧唱歌了,于是小鑫请 ...
- 【USACO 2017FEB】 Why Did the Cow Cross the Road III
[题目链接] 点击打开链接 [算法] 树状数组 [代码] #include<bits/stdc++.h> using namespace std; #define MAXN 100010 ...
- POJ2749 Building road
传送门 这道题真是2-SAT好题啊!!卡了我两个点才做完……垃圾POJ还不告诉我哪错了…… 首先我们先花一段时间把题看懂……(其实是翻译一下),之后我们发现因为每个谷仓只能向一个中转点连边,所以他就是 ...
- [noip模拟赛]跑跑步
https://www.zybuluo.com/ysner/note/1298652 题面 小胡同学是个热爱运动的好孩子. 每天晚上,小胡都会去操场上跑步,学校的操场可以看成一个由\(n\)个格子排成 ...
- CentOS下实现Flask + Virtualenv + uWSGI + Nginx部署
一.项目简介 在本文中,将一步一步搭建一个简单的Flask + Virtualenv + uWSGI + Nginx 架构的Web服务,可以作为新手的学习也可作为记录备忘. 如果你安装好了环境并有一定 ...
- 22.Extjs Panel中显示多行工具栏(tbar)
转自:http://blog.sina.com.cn/s/blog_454fbf740100t0xj.html 在应用程序的制作中,我们经常性的会用到工具栏,在Extjs中Panel中提供了tbar和 ...
- mldonkey设置!看图(转载)
转自:http://www.nenew.net/ubuntu-mldonkey-application.html 这里不是争论区,amule和mldonkey各有各好,看个人爱好,没有高下,都是程序员 ...