react实现选项卡-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_59097751/article/details/120004940

这是一个使用React实现的页面切换示例。代码中定义了一个Table组件，通过state管理当前选中页数，并根据点击事件更新状态，从而改变li元素的显示。样式设置使得页面具有清晰的分页和高亮效果。

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

代码如下：复制就可以用了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <style>
        .tab_con3 {
            width: 600px;
            /* margin: 0 auto; */
        }
 
        .abb {
            height: 40px;
            overflow: hidden;
            margin-bottom: 10px;
        }
 
        .abb li {
            float: left;
            height: 40px;
            line-height: 40px;
            color: #000;
            background :#f1f1f1;
            /* border:1px solid #000; */
            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); */
            text-align: center;
            line-height: 100px;
            border: 1px #000 solid;
        }
 
        .abb .cur3 {
            background: rgb(102, 255, 0);
        }
    </style>
    <script src="./js/browser.js"></script>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
</head>
<body>
 <div id="ball"></div>
    <script type="text/babel">
     let rooter = document.querySelector("#ball");
     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;
        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 />, rooter);


    </script>
</body>
</html>