study
/
react
/
39th.html

<!DOCTYPE html>
<html>
<head>
	<title>react-Tab示例</title>
    <meta charset="UTF-8" />
	<script src='../node_modules/react/umd/react.development.js'></script>
	<script src='../node_modules/react-dom/umd/react-dom.development.js'></script>
    <script src='../node_modules/babel-standalone/babel.min.js'></script>
    <style>
	ul,li {
    	padding:0;
    	margin:0;
    }
    .tab-tit li{
        padding: 10px 15px;
	    text-align: center;
	    list-style:none;
	    cursor:pointer;
		display: inline-block;
    }
    .tab-tit .active{
        color: #09f;
    	border-bottom: 1px solid #09f;
    }
    .tab-con div{
        margin:30px;
    }
	</style>
</head>
<body>
    <div id="my"></div>
    <script type="text/babel">
    class Tab extends React.Component{
        constructor(){
            super();
            this.state = {
                tabs:[{title:'标题1',content:'内容1'},
                    {title:'标题2',content:'内容2'},
                    {title:'标题3',content:'内容3'},
                    {title:'标题4',content:'内容4'},
                    {title:'标题5',content:'内容5'},
                    {title:'标题6',content:'内容6'}],
                curId:0
            };
        };
        changId(i){
            console.log(i);
            this.setState({
                curId:i
            })
        };

        render(){
            var _this = this,
                curid = _this.state.curId;
            var tabTitle = this.state.tabs.map(function(item,index){
                            return <li key={index} onClick={_this.changId.bind(_this,index)}
                            className={index==curid?'active':''}>{item.title}</li>
                            })
            return (
                <div>
                    <ul className="tab-tit">
                        {tabTitle}
                    </ul>
                    <div className="tab-con">
                        {
                            this.state.tabs.map(function(item,index){
                            return (index==curid?<div key={index}>{item.content}</div>:'')
                            })
                        }
                    </div>
                </div>
                )
        }
    };

     ReactDOM.render(
          <Tab/>,
        document.getElementById('my')
    )
    </script>
</body>
</html>