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>
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>
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>
您可以在此处查看演示
TA贡献1802条经验 获得超5个赞
这是您需要的:
添加一类在除单击的选项卡之外的所有选项卡上不显示。
至于这个演示,我添加了
onclick
3 个元素只是为了演示
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>
添加回答
举报