jquery大小指南 - 单击，切换功能

Question

我已经移交了一些代码以在新的domian中实现，但我很难理解为什么代码根本没有启动任何东西。我试过调试alert和console.logs但没有运气。任何想法都会非常受欢迎。

https://codepen.io/davidholloway/pen/BZQLwp

$(document).ready(function(){
    // 'use strict';
    var sizeGuide = {
        isInit: false,
        init: function (options) {
            var optionsCopy = options || {},
                selector = optionsCopy.selector ? optionsCopy.selector : '.size_guide',
                $selector = $(selector),
                $guideWrappers = $selector.find('.guide_wrapper'),
                $guideCheckboxes = $selector.find('.guide_tgl--checkbox');

            // Global
            $guideWrappers.find('th.dual').hide();
            
            // All references tied to parent wrapper
            $selector.on('click', '.guide_update_trigger', function() {                
                var $this = $(this);
                $this.closest('ul').find('button').removeClass('guide_table--active_option').removeAttr('disabled');
                $this.addClass('guide_table--active_option').attr('disabled', true);
                $this.closest('.guide_wrapper').find('tbody th').toggle();
            });

            // Measurement unit switch
            $selector.on('click', '.guide_tgl--btn', function() {
                alert("hello");
                var $this = $(this),
                  imperialValues = $this.closest('.guide_wrapper').find('.imperial'),
                  metricValues = $this.closest('.guide_wrapper').find('.metric'),
                  imperialTooltip = $this.closest('.guide_wrapper').find('.tooltip.imperial'),
                  metricTooltip = $this.closest('.guide_wrapper').find('.tooltip.metric');

                if ($this.prev('.guide_tgl--checkbox').prop('checked') == false) {
                    $this.prev('.guide_tgl--checkbox').prop('checked', true);

                    metricValues.addClass('guide_unit--switchOut');
                    imperialValues.addClass('guide_unit--switchIn');

                    setTimeout(function(){ imperialValues.show().siblings('.metric').hide().removeClass('guide_unit--switchOut') }, 50);
                    setTimeout(function(){ imperialValues.removeClass('guide_unit--switchIn') }, 100);

                    imperialTooltip.show().removeClass('inactive_tooltip').addClass('active_tooltip');
                    metricTooltip.hide().removeClass('active_tooltip').addClass('inactive_tooltip');
                } else {
                    $this.prev('.guide_tgl--checkbox').prop('checked', false);

                    metricValues.addClass('guide_unit--switchIn');
                    imperialValues.addClass('guide_unit--switchOut');

                    setTimeout(function(){ metricValues.show().siblings('.imperial').hide().removeClass('guide_unit--switchOut'); }, 50);
                    setTimeout(function(){ metricValues.removeClass('guide_unit--switchIn') }, 100);

                    imperialTooltip.hide().removeClass('active_tooltip').addClass('inactive_tooltip');
                    metricTooltip.show().removeClass('inactive_tooltip').addClass('active_tooltip');
                }

                $this.siblings('h5.guide_tgl--label').toggleClass('guide_tgl--active_label');
            });

            sizeGuide.isInit = true;
        },
    }

    return sizeGuide;
    
});

.size-guide-overlay .guide_wrapper {
    margin-bottom: 44px;
}
.size-guide-overlay .guide_wrapper:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.size-guide-overlay .guide_table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #666;
    margin-top: 22px;
    float: left;
    clear: both;
    table-layout: fixed;
}
.size-guide-overlay .guide_table:first-child {
    margin-top: 0;
}
.size-guide-overlay .guide_section {
    padding: 0 8px;
}
.size-guide-overlay .guide_table tr {
    border-bottom: 1px solid #ccc;
}
.size-guide-overlay .guide_table thead tr {
    border-bottom: none;
}
.size-guide-overlay .guide_table thead td, .size-guide-overlay .guide_table thead th {
    height: 48px;
    font-weight: 800;
}
.size-guide-overlay .guide_table td {
    height: 40px;
}
.size-guide-overlay .guide_table th {
    position: relative;
    z-index: 20;
}
.size-guide-overlay .guide_table th, .size-guide-overlay .guide_table thead {
    background: #F8F7F6;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
.size-guide-overlay .guide_table th .guide_unit--switchIn, .size-guide-overlay .guide_table th .guide_unit--switchOut {
    color: #F8F7F6;
}
.size-guide-overlay .guide_table th.imperial+th, .size-guide-overlay .guide_table th.metric+th {
    border-right: 2px solid #FFF;
}
.size-guide-overlay .guide_table th+th {
    border-right: none;
}
.size-guide-overlay .guide_table th.dual:after, .size-guide-overlay .guide_table th.single:after, .size-guide-overlay .guide_table th.single:before {
    content: '';
    padding-left: 0;
    padding-right: 0;
}
.size-guide-overlay .guide_table span {
    font-size: 10px;
}
.size-guide-overlay h3 {
    clear: both;
}
.size-guide-overlay .imperial {
    display: none;
}
.size-guide-overlay .imperial:before, .size-guide-overlay .metric:before {
    padding-left: 0;
    content: ''}
.size-guide-overlay .imperial:after, .size-guide-overlay .metric:after {
    padding-right: 0;
    content: ''}
.size-guide-overlay td.guide_unit--switchOut {
    color: #fff;
    transform: translateX(60px);
}
.size-guide-overlay td.guide_unit--switchIn {
    color: #fff;
    transform: translateX(-60px);
}
.size-guide-overlay th.guide_unit--switchIn, .size-guide-overlay th.guide_unit--switchOut {
    color: #F8F7F6;
}
.size-guide-overlay .guide_unit--switchIn:after, .size-guide-overlay .guide_unit--switchOut:before {
    content: ''}
.size-guide-overlay th.guide_unit--switchOut:before {
    padding-left: 60px;
    content: '';
    transition: all .2s ease;
    transform: translate3d(0, 0, 0);
}
.size-guide-overlay th.guide_unit--switchIn:after {
    padding-right: 60px;
    transition: all .2s ease;
    transform: translate3d(0, 0, 0);
}
.size-guide-overlay .table_type_a td {
    width: 25%}
.size-guide-overlay .table_type_a--alt td {
    width: 20%}
.size-guide-overlay .table_type_a--alt td:first-child {
    color: #999;
}
.size-guide-overlay .table_type_a--alt td:first-child+td {
    color: #333;
    width: 0;
}
.size-guide-overlay .table_type_b td {
    width: 33.33%}
.size-guide-overlay .table_type_b1 td {
    width: 25%}
.size-guide-overlay .table_type_b2 td {
    width: 50%}
.size-guide-overlay .table_type_b2 tr:first-child {
    border-top: 1px solid #ccc;
}
.size-guide-overlay .table_type_b2 tr:first-child th {
    border-top: 1px solid #fff;
}
.size-guide-overlay .table_type_c_form {
    float: left;
}
.size-guide-overlay .table_type_c_form--selection {
    width: 284px;
    height: 44px;
    border-radius: 4px!important;
    padding-left: 10px;
    border: 1px solid #999;
    background: #fff;
}
.size-guide-overlay .table_type_c_form label {
    display: block;
    width: 284px;
    font-size: 16px;
    padding: 16px 0;
}
.size-guide-overlay .table_type_c_form select {
    -webkit-appearance: none;
}
.size-guide-overlay .table_type_c_form option {
    padding: 10px 0 10px 10px;
    background-color: #fff;
}
.size-guide-overlay .table_type_c_form div {
    float: left;
    margin-right: 30px;
}
.size-guide-overlay .table_type_c td {
    width: 25%}
.size-guide-overlay .guide_table--loader {
    margin-top: 50px;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 6px solid #ccc;
    border-right: 6px solid #ccc;
    border-bottom: 6px solid #ccc;
    border-left: 6px solid #666;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 .8s infinite linear;
    animation: load8 .8s infinite linear;
}
.size-guide-overlay .guide_table--loader, .size-guide-overlay .guide_table--loader:after {
    border-radius: 50%;
    width: 44px;
    height: 44px;
}
@-webkit-keyframes load8 {
    0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
}
100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}@keyframes load8 {
    0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
}
100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}.size-guide-overlay .table_type_d td {
    width: 25%}
.size-guide-overlay .table_type_d th, .size-guide-overlay .table_type_d1 th {
    color: #333;
}
.size-guide-overlay .table_type_d1 td {
    width: 16.66%}
.size-guide-overlay .guide_tgl, .size-guide-overlay .guide_tgl--label {
    color: #999;
    font-size: 16px;
    font-weight: 400;
    vertical-align: text-top;
    display: inline;
    transition: color .2s ease;
}
.size-guide-overlay .guide_tgl--active_label {
    color: #333;
}
.size-guide-overlay .guide_tgl--btn {
    width: 48px;
    height: 22px;
    border: 1px solid #ccc;
    border-radius: 12px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    margin: 0 10px -5px;
}
.size-guide-overlay .guide_tgl--checkbox {
    display: none;
}
.size-guide-overlay .guide_tgl--checkbox+span.guide_tgl--btn:after {
    background-color: #666;
    border-radius: 50%;
    content: '';
    display: block;
    height: 20px;
    left: 0;
    position: relative;
    transition: all .2s ease;
    width: 20px;
}
.size-guide-overlay .guide_tgl--checkbox:checked+span.guide_tgl--btn:after {
    left: 26px;
}
.size-guide-overlay .guide_table--metric {
    display: none;
}
.size-guide-overlay .guide_table--imperial {
    display: table;
}
.size-guide-overlay ul.guide_table--options {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #999;
    clear: both;
}
.size-guide-overlay ul.guide_table--options li {
    width: 50%;
    height: 100%;
    float: left;
}
.size-guide-overlay ul.guide_table--options li button.guide_table--active_option {
    color: #666;
    border-bottom-color: #666;
}
.size-guide-overlay ul.guide_table--options li button {
    background: #fff;
    border: none;
    border-bottom: 4px solid #fff;
    border-radius: 0;
    border-top: 0 solid #fff;
    box-shadow: none;
    color: #00539F;
    cursor: pointer;
    font-family: Tesco, Helvetica Neue, Arial, sans-serif;
    font-size: 18px;
    font-weight: 800;
    height: 100%;
    outline: 0;
    padding: 0;
    transition: border-bottom-color .2s ease;
    width: 100%}
.size-guide-overlay ul.guide_table--options li button:hover {
    border-width: 0;
    color: #4A90E2;
}
.size-guide-overlay ul.guide_table--options li button:disabled:hover {
    color: #666;
    background: #fff;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 4px solid #666;
}
.size-guide-overlay .guide_tgl--heading {
    font-size: 14px;
    font-weight: 400;
    margin: 20px 0 12px;
}
.size-guide-overlay .guide_section h3 {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 1em;
}
.size-guide-overlay .guide_table .info_overflow {
    width: 16px;
    height: 16px;
    background-color: #00539F;
    border-radius: 50%;
    position: relative;
    overflow: visible;
    cursor: pointer;
    font-weight: 400;
    font-size: 14px;
    z-index: 100;
    vertical-align: middle;
    display: none;
}
.size-guide-overlay .info_overflow:after {
    content: '!';
    color: #fff;
    font-size: 13px;
    text-align: center;
    position: absolute;
    width: 16px;
    left: 0;
}
.size-guide-overlay .guide_table .info_overflow .tooltip:after, .size-guide-overlay .guide_table .info_overflow .tooltip:before {
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    content: '';
    left: 37px;
    z-index: 99;
    position: absolute;
}
.size-guide-overlay .guide_table .info_overflow:hover {
    background-color: #008DC8;
}
.size-guide-overlay .guide_table .info_overflow .tooltip:before {
    border-top: 20px solid #ccc;
    bottom: -20px;
    transition: none;
}
.size-guide-overlay .guide_table .info_overflow .tooltip:after {
    border-top: 20px solid #f6f6f6;
    bottom: -19px;
}
.size-guide-overlay span.tooltip {
    display: inline-block!important;
    visibility: hidden;
    position: absolute;
    top: -40px;
    left: -50px;
    width: 110px;
    padding: 10px 5px;
    border: thin solid #CCC;
    border-radius: 3px;
    text-align: center;
    background: #f6f6f6;
    font-size: 14px;
    opacity: 0;
    transition: all .15s ease;
    pointer-events: none;
    color: #333!important;
}
.size-guide-overlay .guide_table .info_overflow:hover span.tooltip {
    top: -60px;
    opacity: 1;
    transition: all .15s ease;
}
.size-guide-overlay .guide_table .info_overflow span.tooltip.metric {
    visibility: visible;
}
.size-guide-overlay .guide_table .info_overflow span.tooltip.imperial {
    visibility: hidden;
}
.size-guide-overlay .guide_table .info_overflow:hover span.tooltip.active_tooltip {
    visibility: visible;
}
.size-guide-overlay .guide_table .info_overflow:hover span.tooltip.inactive_tooltip {
    visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<link rel="stylesheet" href="../size-guide.css" />

<div class="size-guide-overlay">
<div class="size_guide">
<section class="guide_section">
  <!--<h2>Boys' size guide</h2>
  <p>Welcome to our size guide for F&amp;F clothing. Please note that the guide here applies to F&amp;F collections only, as the sizing of branded collections may be slightly different.<br><br> When measuring, make sure that your child's feet are flat on the floor and keep the tape measure level around the body.<br><br></p>
<h3>F&amp;F BOYS' SIZE CHARTS</h3>-->
<div class="guide_wrapper">

<ul class="guide_table--options">
<li><button class="guide_update_trigger guide_table--active_option" disabled>Single Sizes</button></li>
<li><button class="guide_update_trigger">Dual Sizes</button></li>
</ul>
<h4 class="guide_tgl--heading">Show dimensions as:</h4>
<div class="guide_tgl">
<h5 class="guide_tgl--label guide_tgl--active_label">CENTIMETRES</h5>
<input class="guide_tgl--checkbox" type="checkbox">
<span class="guide_tgl--btn"></span>
<h5 class="guide_tgl--label">INCHES</h5>
</div>

<table class="guide_table table_type_b">
<thead>
<tr style="width: 100%;">
<th>Age</th>
<th>Height</th>
<th>Weight<span class="metric"> (kg)</span><span class="imperial"> (lbs)</span></th>
</tr>
</thead>
<tbody>
<tr>
<th class="single">Tiny baby</th>
<th class="dual">Tiny baby</th>
<td class="metric">44</td>
<td class="metric">2.25</td>
<td class="imperial">17<span>1/4</span></td>
<td class="imperial">5</td>
</tr>
<tr>
<th class="single">Newborn</th>
<th class="dual">Newborn</th>
<td class="metric">50</td>
<td class="metric">3.4</td>
<td class="imperial">19<span>3/4</span></td>
<td class="imperial">7<span>1/2</span></td>
</tr>
<tr>
<th class="single">Up to 1 mth</th>
<th class="dual">Up to 1 mth</th>
<td class="metric">56</td>
<td class="metric">4.5</td>
<td class="imperial">22</td>
<td class="imperial">10</td>
</tr>
<tr>
<th class="single">Up to 3 mths</th>
<th class="dual">0 - 3 mths</th>
<td class="metric">62</td>
<td class="metric">6.5</td>
<td class="imperial">24<span>1/2</span></td>
<td class="imperial">14<span>1/2</span></td>
</tr>
<tr>
<th class="single">6 mths</th>
<th class="dual">3 - 6 mths or 0 - 6 mths</th>
<td class="metric">68</td>
<td class="metric">8</td>
<td class="imperial">26<span>3/4</span></td>
<td class="imperial">18</td>
</tr>
<tr>
<th class="single">9 mths</th>
<th class="dual">6 - 9 mths</th>
<td class="metric">74</td>
<td class="metric">9</td>
<td class="imperial">29</td>
<td class="imperial">20</td>
</tr>
<tr>
<th class="single">12 mths</th>
<th class="dual">9 - 12 mths</th>
<td class="metric">80</td>
<td class="metric">11</td>
<td class="imperial">31<span>1/2</span></td>
<td class="imperial">24</td>
</tr>
<tr>
<th class="single">18 mths</th>
<th class="dual">12 - 18 mths</th>
<td class="metric">86</td>
<td class="metric">12.5</td>
<td class="imperial">33<span>7/8</span></td>
<td class="imperial">28</td>
</tr>
</tbody>
</table>
</div>


<div class="guide_wrapper">
<ul class="guide_table--options">
<li><button class="guide_update_trigger guide_table--active_option" disabled>Single Sizes</button></li>
<li><button class="guide_update_trigger">Dual Sizes</button></li>
</ul>
<h4 class="guide_tgl--heading">Show dimensions as:</h4>
<div class="guide_tgl">
<h5 class="guide_tgl--label guide_tgl--active_label">CENTIMETRES</h5>
<input class="guide_tgl--checkbox" type="checkbox">
<span class="guide_tgl--btn"></span>
<h5 class="guide_tgl--label">INCHES</h5>
</div>

<table class="guide_table table_type_a--alt">
<thead>
<tr style="width: 100%;">
<th>Age</th>
<th>Height</th>
<th>Collar</th>
<th>Chest</th>
<th>Waist</th>
</tr>
</thead>
<tbody>
<tr>
<th class="single">24 mths</th>
<th class="dual">18 - 24 mths</th>
<td class="metric">92</td>
<td class="metric">-</td>
<td class="metric">52.5</td>
<td class="metric">50.5</td>
<td class="imperial">36<span>1/4</span></td>
<td class="imperial">-</td>
<td class="imperial">20<span>5/8</span></td>
<td class="imperial">19<span>7/8</span></td>
</tr>
<tr>
<th class="single">3 yrs</th>
<th class="dual">2 - 3 yrs</th>
<td class="metric">98</td>
<td class="metric">-</td>
<td class="metric">54</td>
<td class="metric">52.5</td>
<td class="imperial">38<span>5/8</span></td>
<td class="imperial">-</td>
<td class="imperial">21<span>1/4</span></td>
<td class="imperial">20<span>5/8</span></td>
</tr>
<tr>
<th class="single">4 yrs</th>
<th class="dual">3 - 4 yrs</th>
<td class="metric">104</td>
<td class="metric">-</td>
<td class="metric">56</td>
<td class="metric">54.5</td>
<td class="imperial">40<span>7/8</span></td>
<td class="imperial">-</td>
<td class="imperial">22<span>1/8</span></td>
<td class="imperial">21<span>1/2</span></td>
</tr>
<tr>
<th class="single">5 yrs</th>
<th class="dual">4 - 5 yrs</th>
<td class="metric">110</td>
<td class="metric">-</td>
<td class="metric">58</td>
<td class="metric">55</td>
<td class="imperial">43<span>1/4</span></td>
<td class="imperial">-</td>
<td class="imperial">22<span>7/8</span></td>
<td class="imperial">21<span>5/8</span></td>
</tr>
<tr>
<th class="single">6 yrs</th>
<th class="dual">5 - 6 yrs</th>
<td class="metric">116</td>
<td class="metric">-</td>
<td class="metric">60.5</td>
<td class="metric">56</td>
<td class="imperial">45<span>5/8</span></td>
<td class="imperial">-</td>
<td class="imperial">23<span>3/4</span></td>
<td class="imperial">22</td>
</tr>
<tr>
<th class="single">7 yrs</th>
<th class="dual">6 - 7 yrs</th>
<td class="metric">122</td>
<td class="metric">-</td>
<td class="metric">63</td>
<td class="metric">57</td>
<td class="imperial">48<span>1/8</span></td>
<td class="imperial">-</td>
<td class="imperial">24<span>3/4</span></td>
<td class="imperial">22<span>1/2</span></td>
</tr>
<tr>
<th class="single">8 yrs</th>
<th class="dual">7 - 8 yrs</th>
<td class="metric">128</td>
<td class="metric">-</td>
<td class="metric">64</td>
<td class="metric">59</td>
<td class="imperial">50<span>3/8</span></td>
<td class="imperial">-</td>
<td class="imperial">25<span>1/4</span></td>
<td class="imperial">23<span>1/4</span></td>
</tr>
<tr>
<th class="single">9 yrs</th>
<th class="dual">8 - 9 yrs</th>
<td class="metric">134</td>
<td class="metric">-</td>
<td class="metric">67.5</td>
<td class="metric">61.5</td>
<td class="imperial">52<span>3/4</span></td>
<td class="imperial">-</td>
<td class="imperial">26<span>1/2</span></td>
<td class="imperial">24<span>1/4</span></td>
</tr>
<tr>
<th class="single">10 yrs</th>
<th class="dual">9 - 10 yrs</th>
<td class="metric">140</td>
<td class="metric">-</td>
<td class="metric">71</td>
<td class="metric">63.5</td>
<td class="imperial">55<span>1/8</span></td>
<td class="imperial">-</td>
<td class="imperial">28</td>
<td class="imperial">25</td>
</tr>
</tbody>
</table>
</div>


<div class="guide_wrapper">
<ul class="guide_table--options">
<li><button class="guide_update_trigger guide_table--active_option" disabled>Single Sizes</button></li>
<li><button class="guide_update_trigger">Dual Sizes</button></li>
</ul>
<h4 class="guide_tgl--heading">Show dimensions as:</h4>
<div class="guide_tgl">
<h5 class="guide_tgl--label guide_tgl--active_label">CENTIMETRES</h5>
<input class="guide_tgl--checkbox" type="checkbox">
<span class="guide_tgl--btn"></span>
<h5 class="guide_tgl--label">INCHES</h5>
</div>

<table class="guide_table table_type_d1">
<thead>
<tr style="width: 100%;">
<th>Age</th>
<th>Height</th>
<th>Collar</th>
<th>Chest</th>
<th>Waist</th>
<th>Inside Leg</th>
</tr>
</thead>
<tbody>
<tr>
<th class="single">11 yrs</th>
<th class="dual">10-11 yrs</th>
<td class="metric">146</td>
<td class="metric">-</td>
<td class="metric">74.5</td>
<td class="metric">66</td>
<td class="metric">-</td>
<td class="imperial">57<span>1/2</span></td>
<td class="imperial">-</td>
<td class="imperial">29<span>1/4</span></td>
<td class="imperial">26</td>
<td class="imperial">-</td>
</tr>
<tr>
<th class="single">12 yrs</th>
<th class="dual">11 - 12 yrs</th>
<td class="metric">152</td>
<td class="metric">-</td>
<td class="metric">78</td>
<td class="metric">68</td>
<td class="metric">-</td>
<td class="imperial">59<span>7/8</span></td>
<td class="imperial">-</td>
<td class="imperial">30<span>3/4</span></td>
<td class="imperial">26<span>3/4</span></td>
<td class="imperial">-</td>
</tr>
<tr>
<th class="single">13 yrs</th>
<th class="dual">12 - 13 yrs</th>
<td class="metric">158</td>
<td class="metric">-</td>
<td class="metric">82</td>
<td class="metric">71.5</td>
<td class="metric">-</td>
<td class="imperial">62<span>1/4</span></td>
<td class="imperial">-</td>
<td class="imperial">32<span>1/4</span></td>
<td class="imperial">28<span>1/8</span></td>
<td class="imperial">-</td>
</tr>
<tr>
<th class="single">14 yrs</th>
<th class="dual">13 - 14 yrs</th>
<td class="metric">164</td>
<td class="metric">-</td>
<td class="metric">86</td>
<td class="metric">75</td>
<td class="metric">-</td>
<td class="imperial">64<span>5/8</span></td>
<td class="imperial">-</td>
<td class="imperial">33<span>7/8</span></td>
<td class="imperial">29<span>1/2</span></td>
<td class="imperial">-</td>
</tr>
<tr>
<th class="single">15 yrs <div class="info_overflow">
<span class="tooltip metric">Inside leg: 78</span>
<span class="tooltip imperial">Inside leg: 30<span>3/4</span></span>
</div></th>
<th class="dual">14 - 15 yrs</th>
<td class="metric">170</td>
<td class="metric">35.75</td>
<td class="metric">89</td>
<td class="metric">77.5</td>
<td class="metric">78</td>
<td class="imperial">67</td>
<td class="imperial">14<span>1/8</span></td>
<td class="imperial">35</td>
<td class="imperial">30<span>1/2</span></td>
<td class="imperial">30<span>3/4</span></td>
</tr>
<tr>
<th class="single">16 yrs <div class="info_overflow">
<span class="tooltip metric">Inside leg: 82</span>
<span class="tooltip imperial">Inside leg: 32<span>1/4</span></span>
</div></th>
<th class="dual">15 - 16 yrs</th>
<td class="metric">176</td>
<td class="metric">37</td>
<td class="metric">91.5</td>
<td class="metric">80</td>
<td class="metric">82</td>
<td class="imperial">69<span>1/4</span></td>
<td class="imperial">15<span>1/8</span></td>
<td class="imperial">36</td>
<td class="imperial">31<span>1/2</span></td>
<td class="imperial">32<span>1/4</span></td>
</tr>
</tbody>
</table>
</div>


<div class="guide_wrapper">
<h4 class="guide_tgl--heading">Show dimensions as:</h4>
<div class="guide_tgl">
<h5 class="guide_tgl--label guide_tgl--active_label">CENTIMETRES</h5>
<input class="guide_tgl--checkbox" type="checkbox">
<span class="guide_tgl--btn"></span>
<h5 class="guide_tgl--label">INCHES</h5>
</div>

<table class="guide_table table_type_b">
<thead>
<tr style="width: 100%;">
<th>Size</th>
<th>Height</th>
<th>Chest</th>
</tr>
</thead>
<tbody>
<tr>
<th>S</th>
<td class="metric">122</td>
<td class="metric">63</td>
<td class="imperial">48<span>1/8</span></td>
<td class="imperial">25</td>
</tr>
<tr>
<th>M</th>
<td class="metric">140</td>
<td class="metric">71</td>
<td class="imperial">55<span>1/8</span></td>
<td class="imperial">28</td>
</tr>
<tr>
<th>L</th>
<td class="metric">158</td>
<td class="metric">88</td>
<td class="imperial">62<span>1/4</span></td>
<td class="imperial">32<span>1/4</span></td>
</tr>
<tr>
<th>XL</th>
<td class="metric">176</td>
<td class="metric">91.5</td>
<td class="imperial">69<span>1/4</span></td>
<td class="imperial">36</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Boys Section End -->




</div>
</div>

Answer 1

检查脚本部分

＆＃13;

＆＃13;

$(document).ready(function(){
    // 'use strict';
        /*isInit: false,
        init:*/ 
var sizeGuide = 
        function (options) {
            var optionsCopy = options || {},
                selector = optionsCopy.selector ? optionsCopy.selector : '.size_guide',
                $selector = $(selector),
                $guideWrappers = $selector.find('.guide_wrapper'),
                $guideCheckboxes = $selector.find('.guide_tgl--checkbox');

            // Global
            $guideWrappers.find('th.dual').hide();
            
            // All references tied to parent wrapper
            $selector.on('click', '.guide_update_trigger', function() {                
                var $this = $(this);
                $this.closest('ul').find('button').removeClass('guide_table--active_option').removeAttr('disabled');
                $this.addClass('guide_table--active_option').attr('disabled', true);
                $this.closest('.guide_wrapper').find('tbody th').toggle();
            });

            // Measurement unit switch
            $selector.on('click', '.guide_tgl--btn', function() {
                alert("hello");
                var $this = $(this),
                  imperialValues = $this.closest('.guide_wrapper').find('.imperial'),
                  metricValues = $this.closest('.guide_wrapper').find('.metric'),
                  imperialTooltip = $this.closest('.guide_wrapper').find('.tooltip.imperial'),
                  metricTooltip = $this.closest('.guide_wrapper').find('.tooltip.metric');

                if ($this.prev('.guide_tgl--checkbox').prop('checked') == false) {
                    $this.prev('.guide_tgl--checkbox').prop('checked', true);

                    metricValues.addClass('guide_unit--switchOut');
                    imperialValues.addClass('guide_unit--switchIn');

                    setTimeout(function(){ imperialValues.show().siblings('.metric').hide().removeClass('guide_unit--switchOut') }, 50);
                    setTimeout(function(){ imperialValues.removeClass('guide_unit--switchIn') }, 100);

                    imperialTooltip.show().removeClass('inactive_tooltip').addClass('active_tooltip');
                    metricTooltip.hide().removeClass('active_tooltip').addClass('inactive_tooltip');
                } else {
                    $this.prev('.guide_tgl--checkbox').prop('checked', false);

                    metricValues.addClass('guide_unit--switchIn');
                    imperialValues.addClass('guide_unit--switchOut');

                    setTimeout(function(){ metricValues.show().siblings('.imperial').hide().removeClass('guide_unit--switchOut'); }, 50);
                    setTimeout(function(){ metricValues.removeClass('guide_unit--switchIn') }, 100);

                    imperialTooltip.hide().removeClass('active_tooltip').addClass('inactive_tooltip');
                    metricTooltip.show().removeClass('inactive_tooltip').addClass('active_tooltip');
                }

                $this.siblings('h5.guide_tgl--label').toggleClass('guide_tgl--active_label');
            });

            sizeGuide.isInit = true;
        }
        sizeGuide();
    
});

＆＃13;

 .size-guide-overlay .guide_wrapper {
    margin-bottom: 44px;
}
.size-guide-overlay .guide_wrapper:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.size-guide-overlay .guide_table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #666;
    margin-top: 22px;
    float: left;
    clear: both;
    table-layout: fixed;
}
.size-guide-overlay .guide_table:first-child {
    margin-top: 0;
}
.size-guide-overlay .guide_section {
    padding: 0 8px;
}
.size-guide-overlay .guide_table tr {
    border-bottom: 1px solid #ccc;
}
.size-guide-overlay .guide_table thead tr {
    border-bottom: none;
}
.size-guide-overlay .guide_table thead td, .size-guide-overlay .guide_table thead th {
    height: 48px;
    font-weight: 800;
}
.size-guide-overlay .guide_table td {
    height: 40px;
}
.size-guide-overlay .guide_table th {
    position: relative;
    z-index: 20;
}
.size-guide-overlay .guide_table th, .size-guide-overlay .guide_table thead {
    background: #F8F7F6;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
.size-guide-overlay .guide_table th .guide_unit--switchIn, .size-guide-overlay .guide_table th .guide_unit--switchOut {
    color: #F8F7F6;
}
.size-guide-overlay .guide_table th.imperial+th, .size-guide-overlay .guide_table th.metric+th {
    border-right: 2px solid #FFF;
}
.size-guide-overlay .guide_table th+th {
    border-right: none;
}
.size-guide-overlay .guide_table th.dual:after, .size-guide-overlay .guide_table th.single:after, .size-guide-overlay .guide_table th.single:before {
    content: '';
    padding-left: 0;
    padding-right: 0;
}
.size-guide-overlay .guide_table span {
    font-size: 10px;
}
.size-guide-overlay h3 {
    clear: both;
}
.size-guide-overlay .imperial {
    display: none;
}
.size-guide-overlay .imperial:before, .size-guide-overlay .metric:before {
    padding-left: 0;
    content: ''}
.size-guide-overlay .imperial:after, .size-guide-overlay .metric:after {
    padding-right: 0;
    content: ''}
.size-guide-overlay td.guide_unit--switchOut {
    color: #fff;
    transform: translateX(60px);
}
.size-guide-overlay td.guide_unit--switchIn {
    color: #fff;
    transform: translateX(-60px);
}
.size-guide-overlay th.guide_unit--switchIn, .size-guide-overlay th.guide_unit--switchOut {
    color: #F8F7F6;
}
.size-guide-overlay .guide_unit--switchIn:after, .size-guide-overlay .guide_unit--switchOut:before {
    content: ''}
.size-guide-overlay th.guide_unit--switchOut:before {
    padding-left: 60px;
    content: '';
    transition: all .2s ease;
    transform: translate3d(0, 0, 0);
}
.size-guide-overlay th.guide_unit--switchIn:after {
    padding-right: 60px;
    transition: all .2s ease;
    transform: translate3d(0, 0, 0);
}
.size-guide-overlay .table_type_a td {
    width: 25%}
.size-guide-overlay .table_type_a--alt td {
    width: 20%}
.size-guide-overlay .table_type_a--alt td:first-child {
    color: #999;
}
.size-guide-overlay .table_type_a--alt td:first-child+td {
    color: #333;
    width: 0;
}
.size-guide-overlay .table_type_b td {
    width: 33.33%}
.size-guide-overlay .table_type_b1 td {
    width: 25%}
.size-guide-overlay .table_type_b2 td {
    width: 50%}
.size-guide-overlay .table_type_b2 tr:first-child {
    border-top: 1px solid #ccc;
}
.size-guide-overlay .table_type_b2 tr:first-child th {
    border-top: 1px solid #fff;
}
.size-guide-overlay .table_type_c_form {
    float: left;
}
.size-guide-overlay .table_type_c_form--selection {
    width: 284px;
    height: 44px;
    border-radius: 4px!important;
    padding-left: 10px;
    border: 1px solid #999;
    background: #fff;
}
.size-guide-overlay .table_type_c_form label {
    display: block;
    width: 284px;
    font-size: 16px;
    padding: 16px 0;
}
.size-guide-overlay .table_type_c_form select {
    -webkit-appearance: none;
}
.size-guide-overlay .table_type_c_form option {
    padding: 10px 0 10px 10px;
    background-color: #fff;
}
.size-guide-overlay .table_type_c_form div {
    float: left;
    margin-right: 30px;
}
.size-guide-overlay .table_type_c td {
    width: 25%}
.size-guide-overlay .guide_table--loader {
    margin-top: 50px;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 6px solid #ccc;
    border-right: 6px solid #ccc;
    border-bottom: 6px solid #ccc;
    border-left: 6px solid #666;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 .8s infinite linear;
    animation: load8 .8s infinite linear;
}
.size-guide-overlay .guide_table--loader, .size-guide-overlay .guide_table--loader:after {
    border-radius: 50%;
    width: 44px;
    height: 44px;
}
@-webkit-keyframes load8 {
    0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
}
100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}@keyframes load8 {
    0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
}
100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}.size-guide-overlay .table_type_d td {
    width: 25%}
.size-guide-overlay .table_type_d th, .size-guide-overlay .table_type_d1 th {
    color: #333;
}
.size-guide-overlay .table_type_d1 td {
    width: 16.66%}
.size-guide-overlay .guide_tgl, .size-guide-overlay .guide_tgl--label {
    color: #999;
    font-size: 16px;
    font-weight: 400;
    vertical-align: text-top;
    display: inline;
    transition: color .2s ease;
}
.size-guide-overlay .guide_tgl--active_label {
    color: #333;
}
.size-guide-overlay .guide_tgl--btn {
    width: 48px;
    height: 22px;
    border: 1px solid #ccc;
    border-radius: 12px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    margin: 0 10px -5px;
}
.size-guide-overlay .guide_tgl--checkbox {
    display: none;
}
.size-guide-overlay .guide_tgl--checkbox+span.guide_tgl--btn:after {
    background-color: #666;
    border-radius: 50%;
    content: '';
    display: block;
    height: 20px;
    left: 0;
    position: relative;
    transition: all .2s ease;
    width: 20px;
}
.size-guide-overlay .guide_tgl--checkbox:checked+span.guide_tgl--btn:after {
    left: 26px;
}
.size-guide-overlay .guide_table--metric {
    display: none;
}
.size-guide-overlay .guide_table--imperial {
    display: table;
}
.size-guide-overlay ul.guide_table--options {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #999;
    clear: both;
}
.size-guide-overlay ul.guide_table--options li {
    width: 50%;
    height: 100%;
    float: left;
}
.size-guide-overlay ul.guide_table--options li button.guide_table--active_option {
    color: #666;
    border-bottom-color: #666;
}
.size-guide-overlay ul.guide_table--options li button {
    background: #fff;
    border: none;
    border-bottom: 4px solid #fff;
    border-radius: 0;
    border-top: 0 solid #fff;
    box-shadow: none;
    color: #00539F;
    cursor: pointer;
    font-family: Tesco, Helvetica Neue, Arial, sans-serif;
    font-size: 18px;
    font-weight: 800;
    height: 100%;
    outline: 0;
    padding: 0;
    transition: border-bottom-color .2s ease;
    width: 100%}
.size-guide-overlay ul.guide_table--options li button:hover {
    border-width: 0;
    color: #4A90E2;
}
.size-guide-overlay ul.guide_table--options li button:disabled:hover {
    color: #666;
    background: #fff;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 4px solid #666;
}
.size-guide-overlay .guide_tgl--heading {
    font-size: 14px;
    font-weight: 400;
    margin: 20px 0 12px;
}
.size-guide-overlay .guide_section h3 {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 1em;
}
.size-guide-overlay .guide_table .info_overflow {
    width: 16px;
    height: 16px;
    background-color: #00539F;
    border-radius: 50%;
    position: relative;
    overflow: visible;
    cursor: pointer;
    font-weight: 400;
    font-size: 14px;
    z-index: 100;
    vertical-align: middle;
    display: none;
}
.size-guide-overlay .info_overflow:after {
    content: '!';
    color: #fff;
    font-size: 13px;
    text-align: center;
    position: absolute;
    width: 16px;
    left: 0;
}
.size-guide-overlay .guide_table .info_overflow .tooltip:after, .size-guide-overlay .guide_table .info_overflow .tooltip:before {
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    content: '';
    left: 37px;
    z-index: 99;
    position: absolute;
}
.size-guide-overlay .guide_table .info_overflow:hover {
    background-color: #008DC8;
}
.size-guide-overlay .guide_table .info_overflow .tooltip:before {
    border-top: 20px solid #ccc;
    bottom: -20px;
    transition: none;
}
.size-guide-overlay .guide_table .info_overflow .tooltip:after {
    border-top: 20px solid #f6f6f6;
    bottom: -19px;
}
.size-guide-overlay span.tooltip {
    display: inline-block!important;
    visibility: hidden;
    position: absolute;
    top: -40px;
    left: -50px;
    width: 110px;
    padding: 10px 5px;
    border: thin solid #CCC;
    border-radius: 3px;
    text-align: center;
    background: #f6f6f6;
    font-size: 14px;
    opacity: 0;
    transition: all .15s ease;
    pointer-events: none;
    color: #333!important;
}
.size-guide-overlay .guide_table .info_overflow:hover span.tooltip {
    top: -60px;
    opacity: 1;
    transition: all .15s ease;
}
.size-guide-overlay .guide_table .info_overflow span.tooltip.metric {
    visibility: visible;
}
.size-guide-overlay .guide_table .info_overflow span.tooltip.imperial {
    visibility: hidden;
}
.size-guide-overlay .guide_table .info_overflow:hover span.tooltip.active_tooltip {
    visibility: visible;
}
.size-guide-overlay .guide_table .info_overflow:hover span.tooltip.inactive_tooltip {
    visibility: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<!-- <link rel="stylesheet" href="../size-guide.css" /> -->

<div class="size-guide-overlay">
<div class="size_guide">
<section class="guide_section">
  <!--<h2>Boys' size guide</h2>
  <p>Welcome to our size guide for F&amp;F clothing. Please note that the guide here applies to F&amp;F collections only, as the sizing of branded collections may be slightly different.<br><br> When measuring, make sure that your child's feet are flat on the floor and keep the tape measure level around the body.<br><br></p>
<h3>F&amp;F BOYS' SIZE CHARTS</h3>-->
<div class="guide_wrapper">

<ul class="guide_table--options">
<li><button class="guide_update_trigger guide_table--active_option" disabled>Single Sizes</button></li>
<li><button class="guide_update_trigger">Dual Sizes</button></li>
</ul>
<h4 class="guide_tgl--heading">Show dimensions as:</h4>
<div class="guide_tgl">
<h5 class="guide_tgl--label guide_tgl--active_label">CENTIMETRES</h5>
<input class="guide_tgl--checkbox" type="checkbox">
<span class="guide_tgl--btn"></span>
<h5 class="guide_tgl--label">INCHES</h5>
</div>

<table class="guide_table table_type_b">
<thead>
<tr style="width: 100%;">
<th>Age</th>
<th>Height</th>
<th>Weight<span class="metric"> (kg)</span><span class="imperial"> (lbs)</span></th>
</tr>
</thead>
<tbody>
<tr>
<th class="single">Tiny baby</th>
<th class="dual">Tiny baby</th>
<td class="metric">44</td>
<td class="metric">2.25</td>
<td class="imperial">17<span>1/4</span></td>
<td class="imperial">5</td>
</tr>
<tr>
<th class="single">Newborn</th>
<th class="dual">Newborn</th>
<td class="metric">50</td>
<td class="metric">3.4</td>
<td class="imperial">19<span>3/4</span></td>
<td class="imperial">7<span>1/2</span></td>
</tr>
<tr>
<th class="single">Up to 1 mth</th>
<th class="dual">Up to 1 mth</th>
<td class="metric">56</td>
<td class="metric">4.5</td>
<td class="imperial">22</td>
<td class="imperial">10</td>
</tr>
<tr>
<th class="single">Up to 3 mths</th>
<th class="dual">0 - 3 mths</th>
<td class="metric">62</td>
<td class="metric">6.5</td>
<td class="imperial">24<span>1/2</span></td>
<td class="imperial">14<span>1/2</span></td>
</tr>
<tr>
<th class="single">6 mths</th>
<th class="dual">3 - 6 mths or 0 - 6 mths</th>
<td class="metric">68</td>
<td class="metric">8</td>
<td class="imperial">26<span>3/4</span></td>
<td class="imperial">18</td>
</tr>
<tr>
<th class="single">9 mths</th>
<th class="dual">6 - 9 mths</th>
<td class="metric">74</td>
<td class="metric">9</td>
<td class="imperial">29</td>
<td class="imperial">20</td>
</tr>
<tr>
<th class="single">12 mths</th>
<th class="dual">9 - 12 mths</th>
<td class="metric">80</td>
<td class="metric">11</td>
<td class="imperial">31<span>1/2</span></td>
<td class="imperial">24</td>
</tr>
<tr>
<th class="single">18 mths</th>
<th class="dual">12 - 18 mths</th>
<td class="metric">86</td>
<td class="metric">12.5</td>
<td class="imperial">33<span>7/8</span></td>
<td class="imperial">28</td>
</tr>
</tbody>
</table>
</div>


<div class="guide_wrapper">
<ul class="guide_table--options">
<li><button class="guide_update_trigger guide_table--active_option" disabled>Single Sizes</button></li>
<li><button class="guide_update_trigger">Dual Sizes</button></li>
</ul>
<h4 class="guide_tgl--heading">Show dimensions as:</h4>
<div class="guide_tgl">
<h5 class="guide_tgl--label guide_tgl--active_label">CENTIMETRES</h5>
<input class="guide_tgl--checkbox" type="checkbox">
<span class="guide_tgl--btn"></span>
<h5 class="guide_tgl--label">INCHES</h5>
</div>

<table class="guide_table table_type_a--alt">
<thead>
<tr style="width: 100%;">
<th>Age</th>
<th>Height</th>
<th>Collar</th>
<th>Chest</th>
<th>Waist</th>
</tr>
</thead>
<tbody>
<tr>
<th class="single">24 mths</th>
<th class="dual">18 - 24 mths</th>
<td class="metric">92</td>
<td class="metric">-</td>
<td class="metric">52.5</td>
<td class="metric">50.5</td>
<td class="imperial">36<span>1/4</span></td>
<td class="imperial">-</td>
<td class="imperial">20<span>5/8</span></td>
<td class="imperial">19<span>7/8</span></td>
</tr>
<tr>
<th class="single">3 yrs</th>
<th class="dual">2 - 3 yrs</th>
<td class="metric">98</td>
<td class="metric">-</td>
<td class="metric">54</td>
<td class="metric">52.5</td>
<td class="imperial">38<span>5/8</span></td>
<td class="imperial">-</td>
<td class="imperial">21<span>1/4</span></td>
<td class="imperial">20<span>5/8</span></td>
</tr>
<tr>
<th class="single">4 yrs</th>
<th class="dual">3 - 4 yrs</th>
<td class="metric">104</td>
<td class="metric">-</td>
<td class="metric">56</td>
<td class="metric">54.5</td>
<td class="imperial">40<span>7/8</span></td>
<td class="imperial">-</td>
<td class="imperial">22<span>1/8</span></td>
<td class="imperial">21<span>1/2</span></td>
</tr>
<tr>
<th class="single">5 yrs</th>
<th class="dual">4 - 5 yrs</th>
<td class="metric">110</td>
<td class="metric">-</td>
<td class="metric">58</td>
<td class="metric">55</td>
<td class="imperial">43<span>1/4</span></td>
<td class="imperial">-</td>
<td class="imperial">22<span>7/8</span></td>
<td class="imperial">21<span>5/8</span></td>
</tr>
<tr>
<th class="single">6 yrs</th>
<th class="dual">5 - 6 yrs</th>
<td class="metric">116</td>
<td class="metric">-</td>
<td class="metric">60.5</td>
<td class="metric">56</td>
<td class="imperial">45<span>5/8</span></td>
<td class="imperial">-</td>
<td class="imperial">23<span>3/4</span></td>
<td class="imperial">22</td>
</tr>
<tr>
<th class="single">7 yrs</th>
<th class="dual">6 - 7 yrs</th>
<td class="metric">122</td>
<td class="metric">-</td>
<td class="metric">63</td>
<td class="metric">57</td>
<td class="imperial">48<span>1/8</span></td>
<td class="imperial">-</td>
<td class="imperial">24<span>3/4</span></td>
<td class="imperial">22<span>1/2</span></td>
</tr>
<tr>
<th class="single">8 yrs</th>
<th class="dual">7 - 8 yrs</th>
<td class="metric">128</td>
<td class="metric">-</td>
<td class="metric">64</td>
<td class="metric">59</td>
<td class="imperial">50<span>3/8</span></td>
<td class="imperial">-</td>
<td class="imperial">25<span>1/4</span></td>
<td class="imperial">23<span>1/4</span></td>
</tr>
<tr>
<th class="single">9 yrs</th>
<th class="dual">8 - 9 yrs</th>
<td class="metric">134</td>
<td class="metric">-</td>
<td class="metric">67.5</td>
<td class="metric">61.5</td>
<td class="imperial">52<span>3/4</span></td>
<td class="imperial">-</td>
<td class="imperial">26<span>1/2</span></td>
<td class="imperial">24<span>1/4</span></td>
</tr>
<tr>
<th class="single">10 yrs</th>
<th class="dual">9 - 10 yrs</th>
<td class="metric">140</td>
<td class="metric">-</td>
<td class="metric">71</td>
<td class="metric">63.5</td>
<td class="imperial">55<span>1/8</span></td>
<td class="imperial">-</td>
<td class="imperial">28</td>
<td class="imperial">25</td>
</tr>
</tbody>
</table>
</div>


<div class="guide_wrapper">
<ul class="guide_table--options">
<li><button class="guide_update_trigger guide_table--active_option" disabled>Single Sizes</button></li>
<li><button class="guide_update_trigger">Dual Sizes</button></li>
</ul>
<h4 class="guide_tgl--heading">Show dimensions as:</h4>
<div class="guide_tgl">
<h5 class="guide_tgl--label guide_tgl--active_label">CENTIMETRES</h5>
<input class="guide_tgl--checkbox" type="checkbox">
<span class="guide_tgl--btn"></span>
<h5 class="guide_tgl--label">INCHES</h5>
</div>

<table class="guide_table table_type_d1">
<thead>
<tr style="width: 100%;">
<th>Age</th>
<th>Height</th>
<th>Collar</th>
<th>Chest</th>
<th>Waist</th>
<th>Inside Leg</th>
</tr>
</thead>
<tbody>
<tr>
<th class="single">11 yrs</th>
<th class="dual">10-11 yrs</th>
<td class="metric">146</td>
<td class="metric">-</td>
<td class="metric">74.5</td>
<td class="metric">66</td>
<td class="metric">-</td>
<td class="imperial">57<span>1/2</span></td>
<td class="imperial">-</td>
<td class="imperial">29<span>1/4</span></td>
<td class="imperial">26</td>
<td class="imperial">-</td>
</tr>
<tr>
<th class="single">12 yrs</th>
<th class="dual">11 - 12 yrs</th>
<td class="metric">152</td>
<td class="metric">-</td>
<td class="metric">78</td>
<td class="metric">68</td>
<td class="metric">-</td>
<td class="imperial">59<span>7/8</span></td>
<td class="imperial">-</td>
<td class="imperial">30<span>3/4</span></td>
<td class="imperial">26<span>3/4</span></td>
<td class="imperial">-</td>
</tr>
<tr>
<th class="single">13 yrs</th>
<th class="dual">12 - 13 yrs</th>
<td class="metric">158</td>
<td class="metric">-</td>
<td class="metric">82</td>
<td class="metric">71.5</td>
<td class="metric">-</td>
<td class="imperial">62<span>1/4</span></td>
<td class="imperial">-</td>
<td class="imperial">32<span>1/4</span></td>
<td class="imperial">28<span>1/8</span></td>
<td class="imperial">-</td>
</tr>
<tr>
<th class="single">14 yrs</th>
<th class="dual">13 - 14 yrs</th>
<td class="metric">164</td>
<td class="metric">-</td>
<td class="metric">86</td>
<td class="metric">75</td>
<td class="metric">-</td>
<td class="imperial">64<span>5/8</span></td>
<td class="imperial">-</td>
<td class="imperial">33<span>7/8</span></td>
<td class="imperial">29<span>1/2</span></td>
<td class="imperial">-</td>
</tr>
<tr>
<th class="single">15 yrs <div class="info_overflow">
<span class="tooltip metric">Inside leg: 78</span>
<span class="tooltip imperial">Inside leg: 30<span>3/4</span></span>
</div></th>
<th class="dual">14 - 15 yrs</th>
<td class="metric">170</td>
<td class="metric">35.75</td>
<td class="metric">89</td>
<td class="metric">77.5</td>
<td class="metric">78</td>
<td class="imperial">67</td>
<td class="imperial">14<span>1/8</span></td>
<td class="imperial">35</td>
<td class="imperial">30<span>1/2</span></td>
<td class="imperial">30<span>3/4</span></td>
</tr>
<tr>
<th class="single">16 yrs <div class="info_overflow">
<span class="tooltip metric">Inside leg: 82</span>
<span class="tooltip imperial">Inside leg: 32<span>1/4</span></span>
</div></th>
<th class="dual">15 - 16 yrs</th>
<td class="metric">176</td>
<td class="metric">37</td>
<td class="metric">91.5</td>
<td class="metric">80</td>
<td class="metric">82</td>
<td class="imperial">69<span>1/4</span></td>
<td class="imperial">15<span>1/8</span></td>
<td class="imperial">36</td>
<td class="imperial">31<span>1/2</span></td>
<td class="imperial">32<span>1/4</span></td>
</tr>
</tbody>
</table>
</div>


<div class="guide_wrapper">
<h4 class="guide_tgl--heading">Show dimensions as:</h4>
<div class="guide_tgl">
<h5 class="guide_tgl--label guide_tgl--active_label">CENTIMETRES</h5>
<input class="guide_tgl--checkbox" type="checkbox">
<span class="guide_tgl--btn"></span>
<h5 class="guide_tgl--label">INCHES</h5>
</div>

<table class="guide_table table_type_b">
<thead>
<tr style="width: 100%;">
<th>Size</th>
<th>Height</th>
<th>Chest</th>
</tr>
</thead>
<tbody>
<tr>
<th>S</th>
<td class="metric">122</td>
<td class="metric">63</td>
<td class="imperial">48<span>1/8</span></td>
<td class="imperial">25</td>
</tr>
<tr>
<th>M</th>
<td class="metric">140</td>
<td class="metric">71</td>
<td class="imperial">55<span>1/8</span></td>
<td class="imperial">28</td>
</tr>
<tr>
<th>L</th>
<td class="metric">158</td>
<td class="metric">88</td>
<td class="imperial">62<span>1/4</span></td>
<td class="imperial">32<span>1/4</span></td>
</tr>
<tr>
<th>XL</th>
<td class="metric">176</td>
<td class="metric">91.5</td>
<td class="imperial">69<span>1/4</span></td>
<td class="imperial">36</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Boys Section End -->




</div>
</div>

＆＃13;

＆＃13;

＆＃13;