上代码
html：
<div id="root"></div>
css：
body {
margin: 0;
}
ul {
display: flex;
justify-content: space-around;
width: 500px;
padding: 0;
}
li {
list-style: none;
height: 30px;
line-height: 30px;
text-align: center;
width: calc(100% / 3);
background: #ccc;
color: aquamarine;
}
li.active {
background: indianred;
color: antiquewhite;
}
.tags>div{
width: 500px;
height: 480px;
border: 2px dotted #ccc;
display: none;
}
.tags>div.active{
display: block;
}
JavaScript：
class Tab extends React.Component {
state = {
tagTitles :[{ id: 't1', title: '首页' }, { id: 't2', title: '新闻' }, { id: 't3', title: '军事' }],
tagContents :[{ id: 'c1', content: '首页内容' }, { id: 'c2', content: '新闻页面' }, { id: 'c3', content: '军事页面' }],
current: 0
}
changeCurrent(index) {
this.setState({
current:index
})
}
render() {
let titles = this.state.tagTitles;
let contents = this.state.tagContents;
let current = this.state.current;
return (
<div className="tags">
<ul>
{
titles.map((item, index) => <li className={current === index ? "active" : ""} onClick={this.changeCurrent.bind(this,index)} key={item.id}>{item.title}</li>)
}
</ul>
{
contents.map((item, index) => <div className={current === index ? "active" : ''} key={item.id}>{item.content}</div>)
}
</div>
)
}
}
ReactDOM.render(<Tab />, document.querySelector('#root'))
