react tab 页面切换（简单）

最新推荐文章于 2024-02-29 10:58:11 发布

原ℳ来

最新推荐文章于 2024-02-29 10:58:11 发布

阅读量577

点赞数 9

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_52983838/article/details/135335238

版权

思路：

HTML+CSS tab切换

1、简单来实现基础结构

2、可以通过修改HTML 对应class名来实现任意改变(手动实现tab切换)


import React, { Component } from 'react'
class View extends Component{
  constructor(props) {
    super(props)
    this.state = {
      tab: {
        current: 1
      }
    }
  }
  tabSwitch(index=1) {
    this.setState({
      tab: {
        ...this.state.tab,
        current:index
      }
    })
  }
  componentDidMount() {
    this.tabSwitch()
  }
  render() {
    const {tab} = this.state
    return (
      <React.Fragment>
        <div className="tab_box">
          <h3>tab切换</h3>
          <ul>
            <li onClick={() => {this.tabSwitch(1)}} className={tab.current ===1 ? 'cur':''}>菜单一</li>
            <li onClick={() => {this.tabSwitch(2)}} className={tab.current ===2 ? 'cur':''}>菜单二</li>
            <li onClick={() => {this.tabSwitch(3)}} className={tab.current ===3 ? 'cur':''}>菜单三</li>
          </ul>
          <div className="tab_con">
            <div className={tab.current ===1 ? 'tab_con_li current':'tab_con_li'}>内容一</div>
            <div className={tab.current ===2 ? 'tab_con_li current':'tab_con_li'}>内容二</div>
            <div className={tab.current ===3 ? 'tab_con_li current':'tab_con_li'}>内容三</div>
          </div>
        </div>
      </React.Fragment>
    )
  }
}
export default View

css 部分


.tab_box {
	width: 500px;
	margin: 50px auto 0;
	ul {
		height: 30px;
		overflow: hidden;
		li {
			float: left;
			width: 100px;
			margin-right: 10px;
			line-height: 30px;
			font-size: 14px;
			text-align: center;
			background: #ccc;
			color: #333;
			cursor: pointer;
			&.cur {
				background: #f60;
				color: #fff;
			}
		}
	}
	.tab_con {
		.tab_con_li {
			height: 100px;
			border: 1px solid red;
			display: none;
			&.current {
				display: block;
			}
		}
	}
}
}