1. How are multiple tabs implemented?
2. Level through the operation of number all began to link!
3. My requirement is to start switching to only that tab
export default class Floor extends React.Component {
constructor() {
super();
this.state = {
floor: [],
current:0,
number:0
};
}
onMouseEnter(e) {
this.setState({
current: e.target.getAttribute("data-index")
})
}
<div className="keywords">
<ul className="keywords-list r">
{list.list.map((list, index) => {
return (
<li
className={
"tab" +
(this.state.current == index
? " current"
: "")
}
>
<a
data-index={index}
onMouseEnter={this.onMouseEnter.bind(this)}
href="-sharp"
>
{list.listLi}
</a>
</li>
);
})}
</ul>
</div> {list.list.map((list, index) => {
return (
<div
className={
"pro-showcase" +
(this.state.number == index ? " show" : "")
}
>
<ul className="brick-list">
{RandomSelection.getRandomArrayElements(
list.proList,
10
).map(list => {
return (
<li className="brick l">
<a className="pro-link" href={list.alink}>
<img
className="pro-img"
src={list.brickImg}
/>
<div className="pro-products">
{list.Products}
</div>
<div className="pro-price">
{list.proPrice}
</div>
<i className="dic">{list.dic}</i>
</a>
</li>
);
})}
</ul>
</div>
);
})}