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 ------------------------------------------------------------------------------------------------ ...
随机推荐
- .NET下为百度文本编辑器UEditor增加图片删除功能
[摘要:比来写了个项目,用到了UEditor,但是UE并出有文件删除功效 然后网上找若何增加 找半天只能找到一个1.2.X的 以是便摹仿PHP的 改成了.NET的 PHP本文 第一步 (增加背景删除地 ...
- 【Poj1017】Packets
http://poj.org/problem?id=1017 艰难啊 弄了很久咧 拍了几十万组,以后拍要多组数据 Solution 从大wangxiaofang 从大往小放,有空余的从大往小填 注意细 ...
- luogu 4429 染色
bjoi 2018 染色 推了个错误结论得了60分? 题目大意: 一个无重边和自环的无向图,并且对每个点分别给了一个大小为2的颜色集合,只能从这个集合中选一种颜色给这个点染色 求一个染色方案使得没有两 ...
- jsp中一行多条数据情况
1.实现效果:点击新增会在之前文本框后一直新增文本框并且保留新增的图片 效果图: 2.jsp代码: <table class="Business_Table"> < ...
- E20170606-gg
complete adj. 完整的; 完成的; (用以强调) 完全的; 达到结尾的; vt. 完成,使完满; 完成或结束; 填写(表格); process n. 过程; 工序; 做事方法; 工艺 ...
- Rails5 View Document
更新: 2017/06/11 更新: 2017/06/15 加粗,submit必须放在form_for内部 更新: 2017/06/23 对待完成的追加# TODO: ...
- 栗染-Myeclispe连接SQL Server数据库
第一步,在SQL server方面 这里是以身份验证登录. 这里我是建了一个hw的数据库,其他没啥说的. 第二步,最主要的一部分 因为第一次连接SQL Server数据库,所以就不知道还有这一步.不然 ...
- bzoj 1620: [Usaco2008 Nov]Time Management 时间管理【贪心】
按s从大到小排序,逆推时间模拟工作 #include<iostream> #include<cstdio> #include<algorithm> using na ...
- 矩阵取数游戏 2007年NOIP全国联赛提高组(dp+高精)
矩阵取数游戏 2007年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description [问题描述]帅帅经常跟 ...
- jQuery多项选择器
jQuery多项选择器模式: $("selector1,selector2,selectorN"); 将每一个选择器匹配到的元素合并后一起返回,可以指定任意多个选择器,并将匹配到的 ...