zoukankan      html  css  js  c++  java
  • react实现tab切换效果

    ...
    this.state = {
    // 全部数据
    addressJobs: [
    {
    address: '北京',
    jobs: ['北京职位1', '北京职位2', '北京职位3', '北京职位4', '北京职位5', '北京职位6', '北京职位7', '北京职位8', '北京职位9']
    },
    {
    address: '上海',
    jobs: ['上海职位1', '上海职位2', '上海职位3', '上海职位4', '上海职位5', '上海职位6', '上海职位7', '上海职位8', '上海职位9']
    },
    {
    address: '广州',
    jobs: ['广州职位1', '广州职位2', '广州职位3', '广州职位4', '广州职位5', '广州职位6', '广州职位7', '广州职位8', '广州职位9']
    },
    {
    address: '其他',
    jobs: ['其他职位1', '其他职位2', '其他职位3', '其他职位4', '其他职位5', '其他职位6', '其他职位7', '其他职位8', '其他职位9']
    },
    ],
    jobssss: [],// 单独取出jobs渲染职位
    }
    .....
    // 初始化的时候选中第一个
    componentDidMount() {
    document.getElementsByClassName('adress-item')[0].className = 'adress-item active';
    this.setState({
    jobssss: this.state.addressJobs[0].jobs
    })
    }
    // tab切换
    adressNavClick = (index) => {
    document.getElementsByClassName('adress-item')[index].className = 'adress-item active';
    this.state.addressJobs.forEach((el,item) => {
    if (item === index) {
    this.setState({
    jobssss: el.jobs
    })
    } else {
    document.getElementsByClassName('adress-item')[item].className = 'adress-item';
    }
    })
    }
    ......
    {/* dom结构 */}
    <div className='recruit-content'>
    <ul className='adress-nav'>
    {this.state.addressJobs ? this.state.addressJobs.map((el, index) => {
    return (<li className='adress-item' key={index} onClick={() => {this.adressNavClick(index)}}>{el.address}</li>)
    }) : ''}
    </ul>
    <div className='jobs-wrapper'>
    <ul className='jobs-list clearfloat'>
    {this.state.jobssss ? this.state.jobssss.map((el, index) => {
    return (<li className='jobs-item' key={index}>{el}</li>)
    }) : ''}
    </ul>
    </div>
    </div>
    ......

  • 相关阅读:
    网页打开qq
    正则表达式
    微信小程序 如何使用globalData
    微信小程序中常见的typeof cb == “function” && cb(that.globalData.userInfo)
    MongoDB
    Elasticsearch学习
    Kafka学习之路 (一)Kafka的简介
    mybatis sql语句中转义字符
    定时任务
    mybatis insert into 返回id,useGeneratedKeys,keyColumn,keyProperty,parameterType
  • 原文地址:https://www.cnblogs.com/tis100204/p/10442475.html
Copyright © 2011-2022 走看看