Javascript 在“我的选项卡”中将“显示从块”设置为“无”

Javascript 在“我的选项卡”中将“显示从块”设置为“无”,javascript,html,css,Javascript,Html,Css,这是我的第一篇文章,我希望你能帮助我。 我有这个代码,但我正在尝试将每个选项卡的显示从block设置为none。例如,如果我单击CM,它应该将表2的显示更改为显示:块;并在none中设置其他两个的显示,以及在我选择的一个中选择的size-guide(尺寸指南)选项卡。 我尝试了一些Javascript,但我是新手,所以没有成功 我知道我问了你很多问题,但一个例子足以让我自己解决剩下的部分 阿尔法 XS s s M M L L 特大号 阿尔法 大小 打破 自然腰围 低腰 臀部 XS 2. 32

这是我的第一篇文章,我希望你能帮助我。 我有这个代码,但我正在尝试将每个选项卡的显示从block设置为none。例如,如果我单击CM,它应该将表2的显示更改为显示:块;并在none中设置其他两个的显示,以及在我选择的一个中选择的size-guide(尺寸指南)选项卡。 我尝试了一些Javascript,但我是新手,所以没有成功

我知道我问了你很多问题,但一个例子足以让我自己解决剩下的部分


阿尔法
XS
s
s
M
M
L
L
特大号
阿尔法
大小
打破
自然腰围
低腰
臀部
XS
2.
32" - 32.5"
24" - 25"
24" - 25"
35"
s
4.
33.5" - 34"
25" - 26"
25" - 26"
36"
s
6.
34.5" - 35"
26" - 27"
26" - 27"
37"
M
8.
35.5" - 36"
27" - 28"
27" - 28"
38"
M
10
36.5" - 37"
28" - 29"
28" - 29"
39"
L
12
37.5" - 38"
29.5" - 30.5"
29.5" - 30.5"
40.5"
L
14
38.5" - 39.5"
31" - 32"
31" - 32"
42"
特大号
16
41.5" - 42.5"
32.5" - 33.5"
32.5" - 33.5"
43.5"
阿尔法
XS
s
s
M
M
L
L
特大号
阿尔法
大小
打破
自然腰围
低腰
臀部
XS
2.
81 - 82.5
61 - 63.5
61 - 63.5
89
s
4.
85 - 86.5
63.5 - 66
63.5 - 66
91.5
s
6.
87.5 - 89
66 - 68.5
66 - 68.5
94
M
8.
90 - 91.5
68.5 - 71
68.5 - 71
96.5
M
10
92.5 - 94
71 - 73.5
71 - 73.5
99
L
12
95 - 96.5
75 - 77.5
75 - 77.5
103
L
14
98 - 100
79 - 81
79 - 81
106.5
特大号
16
105 - 108
82.5 - 85
82.5 - 85
110.5
阿尔法
XXS
XS
XS
s
M
M
L
特大号
XXL
阿尔法
美国尺码
法国
意大利
英国
日本
XXS
00
30
34
2.
1.
XS
0
32
36
4.
3.
XS
2.
34
38
6.
5.
s
4.
36
40
8.
<a href="#" class="size-guide__tabs-2 size-guide__tab" data-target="cm">
    CM
</a>
<div class="size-guide__table size-guide__table-1" data-target="IN" style="display: block;">
 //...
</div>
const tabs = document.querySelectorAll('.size-guide__tab');
const tables = document.querySelectorAll('.size-guide__table');

tabs.forEach((tab) => {
  tab.addEventListener('click', (e) => {
     const targetName = e.target.dataset.target;
     const parent = e.target.parentElement;
     const targetTable = document.querySelector(`div[data-target=${targetName}]`);
     
    // remove the size-guide__tabs--selected class on all children then attach to only clicked tab
    Array.from(parent.children).forEach(child => child.classList.remove('size-guide__tabs--selected'));
    
    //attach class to clicked tab
    e.target.classList.add('size-guide__tabs--selected');
    
    // since you only have the IN and CM options, we need to make sure that the target 
    table exists
    if (targetTable) {
      // hide all table guide
      tables.forEach(table => table.style.display = 'none');
      // then show only the target table
      targetTable.style.display = 'block';
    }
  });
});

<div class="content-asset">
  <link rel="stylesheet" href="https://content.hbc.com/chad/bay/editorial/plugins/saksoff5th/size-guide/off5th-size-guide-template-0000-00-00-main-2.0.1.css">
  <div id="dsg-editorial" class="dsg-editorial dsg-en">
    <section class="size-guide">
      <div class="size-guide__tabs">
        <div class="size-guide__tabs--header">
          <div class="size-guide__tabs--header-left">
            <a href="#" class="size-guide__tabs-1 size-guide__tab size-guide__tabs--selected" data-target="measurement">
              Measurement
            </a>
            <a href="#" class="size-guide__tabs-2 size-guide__tab" data-target="size_conversion">
             Size Conversion
            </a>
          </div>
          <div class="size-guide__tabs--header-right" style="display: flex;">
            <a href="#" class="size-guide__tabs--inches size-guide__tab size-guide__tabs--selected" data-target="IN">
              IN
            </a>
            <a href="#" class="size-guide__tabs--centimiters size-guide__tab" data-target="CM">
              CM
            </a>
          </div>
        </div>
        <div class="size-guide__tabs--content">
          <div class="size-guide__table size-guide__table-1" data-target="IN" style="display: block;">
            <div class="size-guide__table--mobile">
              <div class="size-guide__table--header">
                <div class="table__row-cell-1">Alpha</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">XS</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">S</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">S</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">M</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">M</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">L</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">L</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">XL</div>
              </div>
            </div>
            <div class="size-guide__table--container">
              <div class="size-guide__table--header">
                <div class="table__row-cell-1">Alpha</div>
                <div class="table__row-cell-2">Size</div>
                <div class="table__row-cell-3">Bust</div>
                <div class="table__row-cell-4">Natural Waist</div>
                <div class="table__row-cell-5">Low Waist</div>
                <div class="table__row-cell-6">Hips</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">XS</div>
                <div class="table__row-cell-2">2</div>
                <div class="table__row-cell-3">32" - 32.5"</div>
                <div class="table__row-cell-4">24" - 25"</div>
                <div class="table__row-cell-5">24" - 25"</div>
                <div class="table__row-cell-6">35"</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">S</div>
                <div class="table__row-cell-2">4</div>
                <div class="table__row-cell-3">33.5" - 34"</div>
                <div class="table__row-cell-4">25" - 26"</div>
                <div class="table__row-cell-5">25" - 26"</div>
                <div class="table__row-cell-6">36"</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">S</div>
                <div class="table__row-cell-2">6</div>
                <div class="table__row-cell-3">34.5" - 35"</div>
                <div class="table__row-cell-4">26" - 27"</div>
                <div class="table__row-cell-5">26" - 27"</div>
                <div class="table__row-cell-6">37"</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">M</div>
                <div class="table__row-cell-2">8</div>
                <div class="table__row-cell-3">35.5" - 36"</div>
                <div class="table__row-cell-4">27" - 28"</div>
                <div class="table__row-cell-5">27" - 28"</div>
                <div class="table__row-cell-6">38"</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">M</div>
                <div class="table__row-cell-2">10</div>
                <div class="table__row-cell-3">36.5" - 37"</div>
                <div class="table__row-cell-4">28" - 29"</div>
                <div class="table__row-cell-5">28" - 29"</div>
                <div class="table__row-cell-6">39"</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">L</div>
                <div class="table__row-cell-2">12</div>
                <div class="table__row-cell-3">37.5" - 38"</div>
                <div class="table__row-cell-4">29.5" - 30.5"</div>
                <div class="table__row-cell-5">29.5" - 30.5"</div>
                <div class="table__row-cell-6">40.5"</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">L</div>
                <div class="table__row-cell-2">14</div>
                <div class="table__row-cell-3">38.5" - 39.5"</div>
                <div class="table__row-cell-4">31" - 32"</div>
                <div class="table__row-cell-5">31" - 32"</div>
                <div class="table__row-cell-6">42"</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">XL</div>
                <div class="table__row-cell-2">16</div>
                <div class="table__row-cell-3">41.5" - 42.5"</div>
                <div class="table__row-cell-4">32.5" - 33.5"</div>
                <div class="table__row-cell-5">32.5" - 33.5"</div>
                <div class="table__row-cell-6">43.5"</div>
              </div>
            </div>
          </div>
          <div class="size-guide__table size-guide__table-2" data-target="CM" style="display: none;">
            <div class="size-guide__table--mobile">
              <div class="size-guide__table--header">
                <div class="table__row-cell-1">Alpha</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">XS</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">S</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">S</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">M</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">M</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">L</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">L</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">XL</div>
              </div>
            </div>
            <div class="size-guide__table--container">
              <div class="size-guide__table--header">
                <div class="table__row-cell-1">Alpha</div>
                <div class="table__row-cell-2">Size</div>
                <div class="table__row-cell-3">Bust</div>
                <div class="table__row-cell-4">Natural Waist</div>
                <div class="table__row-cell-5">Low Waist</div>
                <div class="table__row-cell-6">Hips</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">XS</div>
                <div class="table__row-cell-2">2</div>
                <div class="table__row-cell-3">81 - 82.5</div>
                <div class="table__row-cell-4">61 - 63.5</div>
                <div class="table__row-cell-5">61 - 63.5</div>
                <div class="table__row-cell-6">89</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">S</div>
                <div class="table__row-cell-2">4</div>
                <div class="table__row-cell-3">85 - 86.5</div>
                <div class="table__row-cell-4">63.5 - 66</div>
                <div class="table__row-cell-5">63.5 - 66</div>
                <div class="table__row-cell-6">91.5</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">S</div>
                <div class="table__row-cell-2">6</div>
                <div class="table__row-cell-3">87.5 - 89</div>
                <div class="table__row-cell-4">66 - 68.5</div>
                <div class="table__row-cell-5">66 - 68.5</div>
                <div class="table__row-cell-6">94</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">M</div>
                <div class="table__row-cell-2">8</div>
                <div class="table__row-cell-3">90 - 91.5</div>
                <div class="table__row-cell-4">68.5 - 71</div>
                <div class="table__row-cell-5">68.5 - 71</div>
                <div class="table__row-cell-6">96.5</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">M</div>
                <div class="table__row-cell-2">10</div>
                <div class="table__row-cell-3">92.5 - 94</div>
                <div class="table__row-cell-4">71 - 73.5</div>
                <div class="table__row-cell-5">71 - 73.5</div>
                <div class="table__row-cell-6">99</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">L</div>
                <div class="table__row-cell-2">12</div>
                <div class="table__row-cell-3">95 - 96.5</div>
                <div class="table__row-cell-4">75 - 77.5</div>
                <div class="table__row-cell-5">75 - 77.5</div>
                <div class="table__row-cell-6">103</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">L</div>
                <div class="table__row-cell-2">14</div>
                <div class="table__row-cell-3">98 - 100</div>
                <div class="table__row-cell-4">79 - 81</div>
                <div class="table__row-cell-5">79 - 81</div>
                <div class="table__row-cell-6">106.5</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">XL</div>
                <div class="table__row-cell-2">16</div>
                <div class="table__row-cell-3">105 - 108</div>
                <div class="table__row-cell-4">82.5 - 85</div>
                <div class="table__row-cell-5">82.5 - 85</div>
                <div class="table__row-cell-6">110.5</div>
              </div>
            </div>
          </div>
          <div class="size-guide__table size-guide__table-3" style="display: none;">
            <div class="size-guide__table--mobile">
              <div class="size-guide__table--header">
                <div class="table__row-cell-1">Alpha</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">XXS</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">XS</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">XS</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">S</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">M</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">M</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">L</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">XL</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">XXL</div>
              </div>
            </div>
            <div class="size-guide__table--container">
              <div class="size-guide__table--header">
                <div class="table__row-cell-1">Alpha</div>
                <div class="table__row-cell-2">US Size</div>
                <div class="table__row-cell-3">France</div>
                <div class="table__row-cell-4">Italy</div>
                <div class="table__row-cell-5">UK</div>
                <div class="table__row-cell-6">Japan</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">XXS</div>
                <div class="table__row-cell-2">00</div>
                <div class="table__row-cell-3">30</div>
                <div class="table__row-cell-4">34</div>
                <div class="table__row-cell-5">2</div>
                <div class="table__row-cell-6">1</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">XS</div>
                <div class="table__row-cell-2">0</div>
                <div class="table__row-cell-3">32</div>
                <div class="table__row-cell-4">36</div>
                <div class="table__row-cell-5">4</div>
                <div class="table__row-cell-6">3</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">XS</div>
                <div class="table__row-cell-2">2</div>
                <div class="table__row-cell-3">34</div>
                <div class="table__row-cell-4">38</div>
                <div class="table__row-cell-5">6</div>
                <div class="table__row-cell-6">5</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">S</div>
                <div class="table__row-cell-2">4</div>
                <div class="table__row-cell-3">36</div>
                <div class="table__row-cell-4">40</div>
                <div class="table__row-cell-5">8</div>
                <div class="table__row-cell-6">7</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">M</div>
                <div class="table__row-cell-2">6</div>
                <div class="table__row-cell-3">38</div>
                <div class="table__row-cell-4">42</div>
                <div class="table__row-cell-5">10</div>
                <div class="table__row-cell-6">9</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">M</div>
                <div class="table__row-cell-2">8</div>
                <div class="table__row-cell-3">40</div>
                <div class="table__row-cell-4">44</div>
                <div class="table__row-cell-5">12</div>
                <div class="table__row-cell-6">11</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">L</div>
                <div class="table__row-cell-2">10</div>
                <div class="table__row-cell-3">42</div>
                <div class="table__row-cell-4">46</div>
                <div class="table__row-cell-5">14</div>
                <div class="table__row-cell-6">13</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">XL</div>
                <div class="table__row-cell-2">12</div>
                <div class="table__row-cell-3">44</div>
                <div class="table__row-cell-4">48</div>
                <div class="table__row-cell-5">16</div>
                <div class="table__row-cell-6">15</div>
              </div>
              <div class="size-guide__table--row">
                <div class="table__row-cell-1">XXL</div>
                <div class="table__row-cell-2">14</div>
                <div class="table__row-cell-3">46</div>
                <div class="table__row-cell-4">50</div>
                <div class="table__row-cell-5">18</div>
                <div class="table__row-cell-6">17</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>