1import React, { Component } from "react";
2
3
4class Page extends React.Component {
5constructor(props) {
6super(props);
7this.state = {
8 activeTab: 0,
9};
10this.handleClickActiveTab = this.handleClickActiveTab.bind(this);
11}
12
13handleClickActiveTab(e) {
14 const newActiveTab = e.target.tab;
15 this.setState({
16 activeTab : newActiveTab,
17})
18}
19
20render() {
21 const activeClass ='is-active';
22return (
23 <div styleName="page" className="container">
24 <nav className="full-width-with-padding" styleName="nav-tabs-wrap">
25 <ul styleName="nav-tabs">
26 <li styleName={`nav-tabs__item ${this.state.activeTab == 0 ? activeClass :
27 ''}`}>
28 <a styleName="nav-tabs__item-link" data-tab="0" onClick=
29 {this.handleClickActiveTab}>
30 My BQ
31 </a>
32 </li>
33 <li styleName={`nav-tabs__item ${this.state.activeTab == 1 ? activeClass
34 : ''}`}>
35 <a styleName="nav-tabs__item-link" data-tab="1" onClick=
36 {this.handleClickActiveTab}>
37 Subscriptions
38 </a>
39 </li>
40 <li styleName={`nav-tabs__item ${this.state.activeTab == 2 ? activeClass
41 : ''}`}>
42 <a styleName="nav-tabs__item-link" data-tab="2" onClick=
43 {this.handleClickActiveTab}>
44 Promotions
45 </a>
46 </li>
47 <li styleName={`nav-tabs__item ${this.state.activeTab == 3 ? activeClass
48 : '' }`}>
49 <a styleName="nav-tabs__item-link" data-tab="3" onClick=
50 {this.handleClickActiveTab}>
51 Contact
52 </a>
53 </li>
54 <li styleName={`nav-tabs__item ${this.state.activeTab == 4 ? activeClass
55 : '' }`}>
56 <a styleName="nav-tabs__item-link" data-tab="4" onClick=
57 {this.handleClickActiveTab}>
58 Bookmark
59 </a>
60 </li>
61 </ul>
62 </nav>
63 <div />
64 </div>
65 );
66}
67}
68
69 export default Page;
70