React 实现选项卡

最新推荐文章于 2024-04-28 08:11:29 发布

敬余生.

最新推荐文章于 2024-04-28 08:11:29 发布

阅读量424

点赞数

CC 4.0 BY-SA版权

文章标签： react.js css html

本文链接：https://blog.youkuaiyun.com/weixin_57156917/article/details/120004899

这篇博客展示了如何使用React构建一个简单的页面切换组件。通过`Table`类组件，实现了点击选项卡切换内容的功能，并利用`state`来管理当前选中页面的状态。点击每个选项时，`tabFn`函数更新`current`状态，从而改变页面样式。同时，`clsFn`函数根据当前状态确定元素的类名，实现高亮显示当前选中的页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML 部分

<body>
    <div class="root"></div>
</body>
<script type="text/babel">
     class Table extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                current: 1
            }
        }
        tabFn(index) {
            this.setState({
                current: index
            })
        }
        clsFn(index, curCls, cls) {
            let { current } = this.state;
            console.log(current)
            return current === index ? curCls : cls;
        }
        componentDidMount() {
            this.tabFn(1)
        }
        render() {
            let { current } = this.state;
            return (
                <div>
                    <div className='tab_con3'>
                        <ol className='abb'>
                            <li onClick={() => { this.tabFn(1) }} className={this.clsFn(1, 'cur3', '')}>第一页</li>
                            <li onClick={() => { this.tabFn(2) }} className={this.clsFn(2, 'cur3', '')}>第二页</li>
                            <li onClick={() => { this.tabFn(3) }} className={this.clsFn(3, 'cur3', '')}>第三页</li>
                        </ol>
 
                        <ul className='acc'>
                            <li className={this.clsFn(1, 'current', '')}>第一页</li>
                            <li className={this.clsFn(2, 'current', '')}>第二页</li>
                            <li className={this.clsFn(3, 'current', '')}>第三页</li>
                        </ul>
                    </div>
                </div>
            );
        }
    }
 
    ReactDOM.render(<Table />, document.querySelector('.root'));


</script>

css样式部分

<style>
    .tab_con3 {
        width: 500px;
        margin: 0 auto;
    }

    .abb {
        height: 40px;
        overflow: hidden;
        margin-bottom: 10px;
    }

    .abb li {
        float: left;
        height: 40px;
        line-height: 40px;
        color: #fff;
        background: #ccc;
        width: 110px;
        text-align: center;
        cursor: pointer;
        margin-right: 40px;
    }

    .acc li {
        height: 260px;
        /* border: 1px solid skyblue; */
        display: none;
    }

    .acc .current {
        display: block;
        background-color: rgb(236, 236, 236);
    }

    .abb .cur3 {
        background: #f60;
    }
</style>