为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

呼如林 2023-11-11 16:12:17
这是我的第一篇文章,我希望你能帮助我。我有这段代码,但我试图将每个选项卡的显示从块设置为无。例如,如果我单击 CM,它应该将 table-2 的显示更改为 display:block; 并将其他2个的显示设置为none,并将size-guide__tabs--在我选择的一个中选择。我尝试了一些 Javascript,但我对它很陌生,所以我没有成功。我知道我问了你很多,但一个例子足以让我尝试自己解决剩下的部分。<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__tabs--selected">              <span>Measurements</span>            </a>            <a href="#" class="size-guide__tabs-2">              <span>Size Conversion</span>            </a>          </div>          <div class="size-guide__tabs--header-right" style="display: flex;">            <a href="#" class="size-guide__tabs--inches size-guide__tabs--selected">              <span>IN</span>            </a>            <a href="#" class="size-guide__tabs--centimiters">              <span>CM</span>            </a>          </div>        </div>        <div class="size-guide__tabs--content">          <div class="size-guide__table size-guide__table-1" style="display: block;">            <div class="size-guide__table--mobile">              <div class="size-guide__table--header">                <div class="table__row-cell-1">Alpha</div>              </div>
查看完整描述

4 回答

?
有只小跳蛙

TA贡献1824条经验 获得超8个赞

您可以简单地通过所需的 HTML 改进和 Javascript 代码来实现这一点。


此 JS 代码将同时处理所有 3 个表的切换。:)


const cmClass = "size-guide__tabs--centimiters";

const inClass = "size-guide__tabs--inches";

const selected = "size-guide__tabs--selected"

const measureClass = "size-guide__tabs-1";

const sizeClass = "size-guide__tabs-2"

var inTable = document.getElementsByClassName("size-guide__table-1");

var cmTable = document.getElementsByClassName("size-guide__table-2");

var sizeTable = document.getElementsByClassName("size-guide__table-3");

var cmToggle = document.getElementsByClassName(cmClass);

var inToggle = document.getElementsByClassName(inClass);

var sizeToggle = document.getElementsByClassName(sizeClass);

var measureToggle = document.getElementsByClassName(measureClass);


function toggleMeasure(elm) {

  if (elm.classList.contains(cmClass)) {

    cmTable[0].style.display = 'block';

    inTable[0].style.display = 'none';

    sizeTable[0].style.display = 'none';

    cmToggle[0].classList.add(selected);

    inToggle[0].classList.remove(selected);

  } else if (elm.classList.contains(inClass) || elm.classList.contains(measureClass)) {

    inTable[0].style.display = 'block';

    cmTable[0].style.display = 'none';

    sizeTable[0].style.display = 'none';

    inToggle[0].classList.add(selected);

    cmToggle[0].classList.remove(selected);

    measureToggle[0].classList.add(selected);

    sizeToggle[0].classList.remove(selected);

  } else if (elm.classList.contains(sizeClass)) {

    cmTable[0].style.display = 'none';

    inTable[0].style.display = 'none';

    sizeTable[0].style.display = 'block';

    inToggle[0].classList.add(selected);

    cmToggle[0].classList.remove(selected);

    sizeToggle[0].classList.add(selected);

    measureToggle[0].classList.remove(selected);

  }

}

<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__tabs--selected" onclick="toggleMeasure(this)">

              <span>Measurements</span>

            </a>

            <a href="#" class="size-guide__tabs-2" onclick="toggleMeasure(this)">

              <span>Size Conversion</span>

            </a>

          </div>

          <div class="size-guide__tabs--header-right" style="display: flex;">

            <a href="#" class="size-guide__tabs--inches size-guide__tabs--selected" onclick="toggleMeasure(this)">

              <span>IN</span>

            </a>

            <a href="#" class="size-guide__tabs--centimiters" onclick="toggleMeasure(this)">

              <span>CM</span>

            </a>

          </div>

        </div>

        <div class="size-guide__tabs--content">

          <div class="size-guide__table size-guide__table-1" 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" 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>


查看完整回答
反对 回复 2023-11-11
?
慕婉清6462132

TA贡献1804条经验 获得超2个赞

为什么有四个按钮,但只显示三个表格?


let tabs = document.querySelectorAll('.size-guide__tabs--header-left a');

let tabs_ = document.querySelectorAll('.size-guide__tabs--header-right a');

let blocks = document.querySelectorAll('.size-guide__table');


Array.from(tabs).forEach(function(tab, index) {

    tab.onclick = function() {

      Array.from(tabs).forEach(tab => tab.classList.remove('size-guide__tabs--selected'));

      this.classList.add('size-guide__tabs--selected');

      

      Array.from(blocks).forEach(block => block.classList.remove('size-guide__table_active'));

      blocks[index].classList.add('size-guide__table_active');

    }

});


Array.from(tabs_).forEach(function(tab_, index) {

    tab_.onclick = function() {

      Array.from(tabs_).forEach(tab_ => tab_.classList.remove('size-guide__tabs--selected'));

      this.classList.add('size-guide__tabs--selected');

      

      Array.from(blocks).forEach(block => block.classList.remove('size-guide__table_active'));

      blocks[2].classList.add('size-guide__table_active');

    }

});

.size-guide__table {

  display: none!important;

}


.size-guide__table_active {

  display: block!important;

}

<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__tabs--selected">

              <span>Measurements</span>

            </a>

            <a href="#" class="size-guide__tabs-2">

              <span>Size Conversion</span>

            </a>

          </div>

          <div class="size-guide__tabs--header-right" style="display: flex;">

            <a href="#" class="size-guide__tabs--inches size-guide__tabs--selected">

              <span>IN</span>

            </a>

            <a href="#" class="size-guide__tabs--centimiters">

              <span>CM</span>

            </a>

          </div>

        </div>

        <div class="size-guide__tabs--content">

          <div class="size-guide__table size-guide__table-1 size-guide__table_active">

            <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">

            <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">

            <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>


查看完整回答
反对 回复 2023-11-11
?
qq_遁去的一_1

TA贡献1725条经验 获得超7个赞

可以通过data向要定位的 html 元素添加属性来实现。


在你的例子中我添加了data-target属性。


在您的 html 中,我删除了span tag内部元素a以避免单击目标元素时发生事件冒泡并指定了 data-attribute. 我还size-guide__tab向所有选项卡添加了一个类,以便我可以在 js 中定位它们。全部适用于选项卡Measurement, Size Conversion, IN, and CM。


<a href="#" class="size-guide__tabs-2 size-guide__tab" data-target="cm">

    CM

</a>

然后我还将该data-target属性添加到尺寸指南表中。


<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>

您可以在此处查看演示



查看完整回答
反对 回复 2023-11-11
?
慕后森

TA贡献1802条经验 获得超5个赞

这是您需要的:

  1. 添加一类在除单击的选项卡之外的所有选项卡上不显示。

  2. 至于这个演示,我添加了onclick3 个元素只是为了演示

function openTab(tab) {  let tables = document.querySelectorAll(".size-guide__table");
  tables.forEach((table)=> {
    table.classList.add("displayNone");
  });  
  document.getElementById(tab).classList.add("displayBlock");  document.getElementById(tab).classList.remove("displayNone");
}
.displayBlock {  display: block !important;
}.displayNone{  display: none !important;
}
<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__tabs--selected">
              <span>Measurements</span>
            </a>
            <a href="#" class="size-guide__tabs-2" onclick="openTab('table_1')">
              <span>Size Conversion</span>
            </a>
          </div>
          <div class="size-guide__tabs--header-right" style="display: flex;">
            <a href="#" class="size-guide__tabs--inches size-guide__tabs--selected"  onclick="openTab('table_2')">
              <span>IN</span>
            </a>
            <a href="#" class="size-guide__tabs--centimiters"  onclick="openTab('table_3')">
              <span>CM</span>
            </a>
          </div>
        </div>
        <div class="size-guide__tabs--content">
          <div class="size-guide__table displayBlock size-guide__table-1" id="table_1">
            <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 displayBlock size-guide__table-2" id="table_2">
            <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 displayBlock size-guide__table-3" id="table_3">
            <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>

工作小提琴


查看完整回答
反对 回复 2023-11-11
  • 4 回答
  • 0 关注
  • 152 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信