React中实现tab切换

代码比较简单，并不复杂

import React, { Component } from "react";class Taball extends Component {constructor(props) {super(props);this.state = {current: 1,};}handleTab(index) {this.setState({current: index,});}classFn(index, class1, class2) {//如果符合当前就要多一个class，如果不符合当前就没有对应的classlet { current } = this.state;return current === index ? class1 : class2;}componentDidMount() {this.handleTab(1);}render() {return (<div><h1>tab切换</h1><div className="tab_con2"><ol><lionClick={() => {this.handleTab(1);}}className={this.classFn(1, "cur", "")}>菜单一</li><lionClick={() => {this.handleTab(2);}}className={this.classFn(2, "cur", "")}>菜单二</li><lionClick={() => {this.handleTab(3);}}className={this.classFn(3, "cur", "")}>菜单三</li></ol><ul><li className={this.classFn(1, "current", "")}>内容一</li><li className={this.classFn(2, "current", "")}>内容二</li><li className={this.classFn(3, "current", "")}>内容三</li></ul></div></div>);}
}export default Taball;

React中实现tab切换相关推荐

微信小程序中的Tab切换
微信小程序中的Tab切换使用步骤使用步骤代码如下(示例): 定义一个状态status data: {status: 0,}, 代码如下(示例): 在点击切换时利用status来切换根据index ...
VUE实现Tab切换
VUE中实现Tab切换方式,需要用到以下知识点: 1.动态绑定class,用于导航高亮显示 :class="{active:cur==0}"复制代码 2.click点击事件,用于改 ...
vue中怎么清空tab选项卡的缓存_vue Tab切换以及缓存页面处理的几种方式
前言相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换使用动态组件,相信大家都能看懂(部分代码省略) ...
Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式点击按钮 ...
vue中怎么清空tab选项卡的缓存_vuejs 内置组件component实现tab切换懒加载和表单输入框内容的清空...
最近项目中使用了vue2.0 官网脚手架进行了开发.开发中的踩一些坑一直没有来得及整理.本篇文章就vuejs内置组件component的一些使用进行一些总结. 1.使用component 实现tab切 ...
react 实现tab切换三角形筛选样式
react 实现tab切换三角形筛选样式接下来上效果这次使用的是react的class 类组件 import React, { Component } from 'react' import { ...
解决Echarts使用tab切换时只显示第一个tab中图表，其他tab中图表不显示或显示不全问题
近期项目中使用到了Echarts来在展示图表,两个tab切换页面中都存在图表,页面加载完成后都对所有图表进行了初始化和绘制,然而在tab切换中出现了如下动图中的问题: 说明:图中可以看到,第一个tab ...
vue中tab切换前端实现_vue实现Tab切换功能
在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换.Tab动态组件切换.通过v-show设置Tab显示隐藏.每种方法实现起来其实 ...
vue项目中Tab切换，以及不同状态如何显示
前言例如:这里主要讲到项目中我们会遇到的Tab切换,以及订单状态的显示. 一.Tab切换要如何去写? 代码如下(示例): <el-tabs type="border-card&quo ...

React中实现tab切换

React中实现tab切换相关推荐

最新文章

热门文章