React 选项卡

最新推荐文章于 2024-06-05 10:04:19 发布

臭宝520

最新推荐文章于 2024-06-05 10:04:19 发布

阅读量93

点赞数

文章标签： react.js javascript html5

本文链接：https://blog.csdn.net/xiao980522/article/details/120009108

版权

<!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>选项卡</title>
    <script src="./js/browser.js"></script>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <style>
        .tab-con {
            width: 700px;
            margin: 50px auto;

        }

        .tab-nav {
            height: 50px;
            overflow: hidden;
            margin-bottom: 15px;
        }

        .tab-nav li {
            float: left;
            line-height: 50px;
            height: 50px;
            color: red;
            background-color: #eee;
            width: 120px;
            text-align: center;
            cursor: pointer;
            margin-right: 40px;
            list-style: none;
        }

        .tab-content li {
            height: 260px;
            width: 500px;
            display: none;
        }
        .tab-content li img{
            width: 150px;
            height: 150px;
            display: block;
            margin: auto;
            padding-top: 50px;
        }
        .tab-content .current {
            display: block;
            background-color: rgb(236, 236, 236);
        }

        .tab-nav .tab-nav2 {
            background: #aaa;
        }
    </style>
</head>

<body>
    <div class="tab"></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;
            return current === index ? curCls : cls;
        }
        componentDidMount() {
            this.tabFn(1);
        }

        render() {
            let { current } = this.state;
            return (
                <div>
                    <div className="tab-con"></div>
                    <ol className="tab-nav">
                        <li onClick={() => { this.tabFn(1) }} className={this.clsFn(1, 'tab-nav2', '')}>选项一</li>
                        <li onClick={() => { this.tabFn(2) }} className={this.clsFn(2, 'tab-nav2', '')}>选项二</li>
                        <li onClick={() => { this.tabFn(3) }} className={this.clsFn(3, 'tab-nav2', '')}>选项三</li>
                    </ol>
                    <ul className='tab-content'>
                        <li className={this.clsFn(1, 'current', '')}>
                           内容一
                        </li>
                        <li className={this.clsFn(2, 'current', '')}>
                           内容二
                        </li>
                        <li className={this.clsFn(3, 'current', '')}>
                           内容三
                        </li>
                    </ul>
                </div>
            )
        }
    }


    ReactDOM.render(<Table />, document.querySelector(".tab"));
</script>

</html>

臭宝520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 选项卡

<!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>选.
复制链接

扫一扫