Java scriptでのタブ機能について

タブを作っていますが完全に行き詰まりましたどこを直したらいいでしょうか、、

HTML
1 <meta charset="utf-8">
2  <title>JavaScript Test</title>
3  <link rel="stylesheet" href="main.css">
4 </head>
5
6 <body>
7  <div class="tabs-menu">
8    <div id="tab-menu-a">タブa</div>
9    <div id="tab-menu-b">タブb</div>
10    <div id="tab-menu-c">タブc</div>
11  </div>
12  <div class="tabs-content">
13    <div id="tabs-a">
14      <p>おはよう</p>
15    </div>
16    <div id="tabs-b">
17      <p>こんにちは</p>
18    </div>
19    <div id="tabs-c">
20      <p>こんばんは</p>
21    </div>
22  </div>
23
24  <!-- jQuery -->
25  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
26  <script src="main.js"></script>
27 </body>
28 
29</html>

css
1body {
2    color: #3F4548;
3}
4
5
6.tabs-menu {
7    margin: 0;
8    padding: 0;
9    list-style-type: none;
10}
11
12
13.tabs-menu div {
14  float: left;
15  margin-right: 8px;
16  margin-bottom: -1px;
17  border-style: solid;
18  border-width: 1px;
19  border-color: transparent;
20  border-radius: 4px 4px 0 0;
21  display: block;
22  padding: 10px 20px;
23  color: #557F95;
24  text-decoration: none;
25  transition: all .15s;
26}
27
28
29.tabs-menu div:not(.active):hover {
30  border-color: #f0f0f0 #f0f0f0 #999;
31  background-color: #f0f0f0;
32}
33
34.tabs-menu .active {
35  border-color: #999 #999 transparent #999;
36  background-color: #fff;
37}
38
39.tabs-menu .active div {
40  color: #3F4548;
41}
42
43.tabs-content {
44  clear: both;
45  border: 1px solid #999;
46  border-radius: 0 4px 4px 4px;
47  padding: 10px;
48}
49
50.tabs-content div {
51  display: none;
52}

javascript
1const showTab = (selector) => { 
2    
3    console.log(selector);
4    
5    $('.tabs-menu > div').removeClass('active');
6
7    if('selector' === 'tab-menu-a') {
8        $('#tab-menu-a').addClass('active');
9    } else if ('selector' === 'tab-menu-b') {
10        $('#tab-menu-b').addClass('active');
11    } else if('selector' === 'tab-menu-c') {
12        $('#tab-menu-c').addClass('active');
13    }
14    
15    $('.tabs-content > div').hide();
16    
17     if('selector' === 'tab-menu-a') {
18        $('#tabs-a').show();
19    } else if ('selector' === 'tab-menu-b') {
20        $('#tabs-b').show();
21    } else if('selector' === 'tab-menu-c') {
22        $('#tabs-c').show();
23    }
24    
25 };
26 
27 
28$('#tab-menu-a').on('click', (e) => {
29   const selector =$(e.target).attr('id');
30   showTab(selector);
31});
32
33$('#tab-menu-b').on('click', (e) => {
34   const selector =$(e.target).attr('id');
35   showTab(selector);
36});
37
38$('#tab-menu-c').on('click', (e) => {
39   const selector =$(e.target).attr('id');
40   showTab(selector);
41});
42
43showTab('tab-menu-a');

m.ts10806

2020/04/19 08:51

どういうタブを作りたくてどう行き詰っているのか分かりませんのできちんと要件と起きている問題、「何を解決したいか」具体的に記載してください。 https://teratail.com/help/question-tips#questionTips3-3 https://teratail.com/help/question-tips#questionTips3-4

行動規範の内容に同意します

回答1件

ベストアンサー

そんな大変なことをしなくてもこんな感じでいいのでは。

html
1<div id="tabs-a" class = "tab active">  /* .active追記 */
2  <p>おはよう</p>
3</div>

css
1.tabs-content .active {
2  display: block;
3}
4
5.tabs-content div {
6}
7
8.tab {
9  display:none;
10}

javascript
1$('.tabs-menu').on('click', function(e) {
2  /* クリックされたdivの番号を取得 */
3  const index = $(e.target).index();
4  /* activeクラスを削除 */
5  $('.tabs-content div').add('.tabs-menu div').removeClass('active');
6  /* 選択された要素にactiveクラスを追加 */
7  $('.tabs-content div').eq(index).addClass('active');
8  $('.tabs-menu div').eq(index).addClass('active');
9});