javascript - 选择下拉值显示一个div

Question

我在一个响应式网站上工作，我正在开发一个选项卡式组件。它的工作方式是，在台式机和平板电脑中，我呈现一个菜单，然后在单击菜单按钮时，我会像这样显示相应的 div。

台式机和平板电脑的菜单:

所以当我选择不同的选项卡选项时，我会显示相应的选项卡内容。对于移动设备，我必须将此菜单转换为下拉菜单，我能够做到。但是在单击下拉值时，我想呈现相应的选项卡内容，但我无法做到。我想在选择下拉值时显示相应的选项卡。任何帮助表示赞赏。请找到附件中的 JSFiddle。

function testFunction(evt, tabNumber) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabNumber).style.display = "block";
  evt.currentTarget.className += " active";
}

$(document).ready(function() {
  $('.dropdown > ul').toggleClass('no-js js');
  $('.dropdown .js ul').hide();
  $('.dropdown .js').click(function(e) {
    $('.dropdown .js ul').slideToggle(200);
    $('.dropbtn').toggleClass('active');
    e.stopPropagation();
    e.stopPropagation();
  });
  if ($('.dropdown .js ul').is(':visible')) {
    $('.dropdown .js ul', this).slideUp();
    $('.dropbtn').removeClass('active');
  }

  $("#filter-options-ul li").on("click", function() {
    console.log('clicked');
    var val = $(this).find('span').html();
    //$('.filter-options').css('border-right', '20px solid' + col);
    $('.dropbtn').html(val);
  });
});

@media all and (min-width:320px) and (max-width:767px) {
  .c-koh-tabbed-article .koh-article-header {
    border-bottom: none;
  }
  .dropdown {
    position: relative;
    display: block;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .dropbtn {
    background-color: #fff;
    font-family: Helvetica Neue LT Pro Roman;
    font-size: 14px;
    color: #000;
    width: 100%;
    padding: 15px;
    text-align: left;
    border: 1px solid #e5e5e5;
    cursor: pointer;
  }
  .dropbtn::after {
    content: "\e600";
    font-family: KohlerIcons;
    font-size: 12px;
    width: 16px;
    height: 16px;
    float: right;
    margin-top: 5px;
    box-sizing: border-box;
  }
  .dropdown ul {
    position: relative;
    padding-left: 0px;
    font-weight: 400;
    margin-bottom: 0;
    font-size: 14px
  }
  .dropdown ul li {
    position: relative;
    list-style: none;
    cursor: pointer;
  }
  .dropdown ul li ul {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9999;
  }
  .dropdown ul li ul {
    padding-left: 0px;
  }
  .dropdown ul li li span {
    font-family: Helvetica Neue LT Pro Roman;
    font-size: 14px;
    color: #000;
    transition: background-color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    display: block;
    background: #fff;
    padding: 20px 15px;
    border: 1px solid #e5e5e5;
  }
  /* Fallbacks */
  .dropdown .no-js ul {
    display: none;
  }
}

@media all and (min-width:768px) {
  .dropdown {
    display: none;
  }
  .c-koh-tabbed-article .koh-article-header .koh-article-controls .koh-article-set {
    display: table;
    border: none;
    box-shadow: none;
  }
  .c-koh-tabbed-article .koh-article-header .koh-article-controls .koh-article-set li {
    display: table-cell;
    border-bottom: none;
  }
  .button-default {
    font-family: Nexa W01 Heavy !important;
    font-size: 14px !important;
    color: #77777A !important;
    display: inline !important;
    width: 100% !important;
    padding: 0px 20px !important;
    height: 45px !important;
    margin: 0 !important;
    background: #FFF !important;
    border: 1px solid #77777A !important;
    color: #77777A !important;
    border-radius: 0px !important;
    text-transform: uppercase !important;
  }
  .button-default:hover {
    background: #77777A !important;
    color: #FFF !important;
  }
  .button-default.active {
    background: #77777A !important;
    color: #FFF !important;
  }
  .tabcontent {
    margin: 30px 0px;
    text-align: left;
    width: 100%;
    overflow: hidden;
  }
}

.c-koh-tabbed-article .koh-article-header .koh-article-title {
  font-family: Nexa W01 Heavy !important;
  font-size: 30px !important;
  color: #000 !important;
  font-weight: bold !important;
}

.c-koh-tabbed-article .koh-article-header .koh-article-controls {
  height: auto !important;
}

.strong {
  font-family: Nexa W01 XBold !important;
  font-size: 18px !important;
  color: #000 !important;
}

.article-sub-text {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 14px !important;
  color: #000 !important;
  font-weight: 400 !important;
}

.left-column {
  width: 50%;
  float: left;
  padding-right: 20px;
}

.right-column {
  width: 50%;
  float: left;
}

.right-column img {
  display: block;
  width: 100%;
  height: auto;
}

@media all and (min-width:980px) {
  .tabcontent {
    margin: 30px 0px 30px 10px;
    text-align: left;
    width: 100%;
    overflow: hidden;
  }
  .button-default {
    font-family: Nexa W01 Heavy !important;
    font-size: 14px !important;
    color: #77777A !important;
    display: inline !important;
    width: auto !important;
    padding: 0px 45px !important;
    height: 45px !important;
    margin: 0px 20px 0px 0px !important;
    background: #FFF !important;
    border: 1px solid #77777A !important;
    color: #77777A !important;
    border-radius: 0px !important;
    text-transform: uppercase !important;
  }
  .button-default:last-child {
    margin: 0px !important;
  }
  .button-default:hover {
    background: #77777A !important;
    color: #FFF !important;
  }
  .button-default.active {
    background: #77777A !important;
    color: #FFF !important;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section class="c-koh-tabbed-article">
  <div class="koh-article-container">
    <div class="koh-article-header">
      <div class="koh-article-controls">
        <ul class="koh-article-set">
          <li><button onclick="testFunction(event,'tab1')" class="button-default tablinks">Blandit</button></li>
          <li><button onclick="testFunction(event,'tab2')" class="button-default tablinks" href="javascript:void(0);">Aliquam</button></li>
          <li><button onclick="testFunction(event,'tab3')" class="button-default tablinks" href="javascript:void(0);">Pharetra Maximus</button></li>
          <li><button onclick="testFunction(event,'tab4')" class="button-default tablinks" href="javascript:void(0);">Tincidunt</button></li>
          <li><button onclick="testFunction(event,'tab5')" class="button-default tablinks" href="javascript:void(0);">Condimentum</button></li>
        </ul>

        <div class="dropdown">
          <ul class="no-js">
            <li>
              <button id="filter-options" class="dropbtn">Select One</button>
              <ul id="filter-options-ul">

                <li><span>Blandit</span></li>
                <li><span>Aliquam</span></li>
                <li><span>Pharetra Maximus</span></li>
                <li><span>Tincidunt</span></li>
                <li><span>Condimentum</span></li>
              </ul>
            </li>
          </ul>
        </div>

        <div id="tab1" class="tabcontent" style="display:none;">
          <div class="left-column">
            <span class="strong"> This is the heading of the tabbed component and will be in bold</span>
            <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
              to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
            <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
              has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
              in the original.</p>

          </div>
          <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab65695_1800x800?$1800Hero$" alt="Kohler Image"></img>
          </div>
        </div>
        <div id="tab2" class="container tabcontent" style="display:none;">
          <div class="left-column">
            <span class="strong"> This is the heading of the tabbed component and will be in bold</span>
            <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
              to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
            <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
              has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
              in the original.</p>

          </div>
          <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/aab27241_1800x800" alt="Kohler Image">
          </div>
        </div>
        <div id="tab3" class="tabcontent" style="display:none;">
          <div class="left-column">
            <span class="strong"> This is the heading of the tabbed component and will be in bold</span>
            <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
              to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
            <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
              has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
              in the original.</p>

          </div>
          <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab80843_rgb?crop=(102,1521,4876,2167)$" alt="Kohler Image">
          </div>
        </div>
        <div id="tab4" class="tabcontent" style="display:none;">
          <div class="left-column">
            <span class="strong"> This is the heading of the tabbed component and will be in bold</span>
            <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
              to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
            <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
              has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
              in the original.</p>

          </div>
          <div class="right-column"><img src="https://s3.img-b.com/image/private/t_base,f_auto,c_lpad,h_800/product/Kohler/kohler-k-6331-alternate-image-4-473.jpg" alt="Kohler Image">
          </div>
        </div>
        <div id="tab5" class="tabcontent" style="display:none;">
          <div class="left-column">
            <span class="strong"> This is the heading of the tabbed component and will be in bold</span>
            <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
              to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
            <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
              has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
              in the original.</p>

          </div>
          <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab42000_1800x800?$1800Hero$" alt="Kohler Image">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

下拉菜单和选项卡都显示了，我不知道为什么样式没有出现。可能是媒体查询。但功能有效。当您单击该选项卡时，您会看到下拉列表下方显示的 2 个 div。单击下拉值时，我想实现相同的目的。感谢您的帮助。

Answer 1

您的代码过于复杂，请按以下方式操作:-

function testFunction(evt, tabNumber) {
  $('.tabcontent').hide();
  $("#"+tabNumber).show();
}

工作示例:-

function testFunction(evt, tabNumber) {
  $('.tabcontent').hide();
  $("#"+tabNumber).show();
}

$(document).ready(function() {
  $('.dropdown > ul').toggleClass('no-js js');
  $('.dropdown .js ul').hide();
  $('.dropdown .js').click(function(e) {
    $('.dropdown .js ul').slideToggle(200);
    $('.dropbtn').toggleClass('active');
    e.stopPropagation();
    e.stopPropagation();
  });
  if ($('.dropdown .js ul').is(':visible')) {
    $('.dropdown .js ul', this).slideUp();
    $('.dropbtn').removeClass('active');
  }

  $("#filter-options-ul li").on("click", function() {
    console.log('clicked');
    var val = $(this).find('span').html();
    //$('.filter-options').css('border-right', '20px solid' + col);
    $('.dropbtn').html(val);
  });
});

@media all and (min-width:320px) and (max-width:767px) {
  .c-koh-tabbed-article .koh-article-header {
    border-bottom: none;
  }
  .dropdown {
    position: relative;
    display: block;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .dropbtn {
    background-color: #fff;
    font-family: Helvetica Neue LT Pro Roman;
    font-size: 14px;
    color: #000;
    width: 100%;
    padding: 15px;
    text-align: left;
    border: 1px solid #e5e5e5;
    cursor: pointer;
  }
  .dropbtn::after {
    content: "\e600";
    font-family: KohlerIcons;
    font-size: 12px;
    width: 16px;
    height: 16px;
    float: right;
    margin-top: 5px;
    box-sizing: border-box;
  }
  .dropdown ul {
    position: relative;
    padding-left: 0px;
    font-weight: 400;
    margin-bottom: 0;
    font-size: 14px
  }
  .dropdown ul li {
    position: relative;
    list-style: none;
    cursor: pointer;
  }
  .dropdown ul li ul {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9999;
  }
  .dropdown ul li ul {
    padding-left: 0px;
  }
  .dropdown ul li li span {
    font-family: Helvetica Neue LT Pro Roman;
    font-size: 14px;
    color: #000;
    transition: background-color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    display: block;
    background: #fff;
    padding: 20px 15px;
    border: 1px solid #e5e5e5;
  }
  /* Fallbacks */
  .dropdown .no-js ul {
    display: none;
  }
}

@media all and (min-width:768px) {
  .dropdown {
    display: none;
  }
  .c-koh-tabbed-article .koh-article-header .koh-article-controls .koh-article-set {
    display: table;
    border: none;
    box-shadow: none;
  }
  .c-koh-tabbed-article .koh-article-header .koh-article-controls .koh-article-set li {
    display: table-cell;
    border-bottom: none;
  }
  .button-default {
    font-family: Nexa W01 Heavy !important;
    font-size: 14px !important;
    color: #77777A !important;
    display: inline !important;
    width: 100% !important;
    padding: 0px 20px !important;
    height: 45px !important;
    margin: 0 !important;
    background: #FFF !important;
    border: 1px solid #77777A !important;
    color: #77777A !important;
    border-radius: 0px !important;
    text-transform: uppercase !important;
  }
  .button-default:hover {
    background: #77777A !important;
    color: #FFF !important;
  }
  .button-default.active {
    background: #77777A !important;
    color: #FFF !important;
  }
  .tabcontent {
    margin: 30px 0px;
    text-align: left;
    width: 100%;
    overflow: hidden;
  }
}

.c-koh-tabbed-article .koh-article-header .koh-article-title {
  font-family: Nexa W01 Heavy !important;
  font-size: 30px !important;
  color: #000 !important;
  font-weight: bold !important;
}

.c-koh-tabbed-article .koh-article-header .koh-article-controls {
  height: auto !important;
}

.strong {
  font-family: Nexa W01 XBold !important;
  font-size: 18px !important;
  color: #000 !important;
}

.article-sub-text {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 14px !important;
  color: #000 !important;
  font-weight: 400 !important;
}

.left-column {
  width: 50%;
  float: left;
  padding-right: 20px;
}

.right-column {
  width: 50%;
  float: left;
}

.right-column img {
  display: block;
  width: 100%;
  height: auto;
}

@media all and (min-width:980px) {
  .tabcontent {
    margin: 30px 0px 30px 10px;
    text-align: left;
    width: 100%;
    overflow: hidden;
  }
  .button-default {
    font-family: Nexa W01 Heavy !important;
    font-size: 14px !important;
    color: #77777A !important;
    display: inline !important;
    width: auto !important;
    padding: 0px 45px !important;
    height: 45px !important;
    margin: 0px 20px 0px 0px !important;
    background: #FFF !important;
    border: 1px solid #77777A !important;
    color: #77777A !important;
    border-radius: 0px !important;
    text-transform: uppercase !important;
  }
  .button-default:last-child {
    margin: 0px !important;
  }
  .button-default:hover {
    background: #77777A !important;
    color: #FFF !important;
  }
  .button-default.active {
    background: #77777A !important;
    color: #FFF !important;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section class="c-koh-tabbed-article">
  <div class="koh-article-container">
    <div class="koh-article-header">
      <div class="koh-article-controls">
        <ul class="koh-article-set">
          <li><button onclick="testFunction(event,'tab1')" class="button-default tablinks">Blandit</button></li>
          <li><button onclick="testFunction(event,'tab2')" class="button-default tablinks" href="javascript:void(0);">Aliquam</button></li>
          <li><button onclick="testFunction(event,'tab3')" class="button-default tablinks" href="javascript:void(0);">Pharetra Maximus</button></li>
          <li><button onclick="testFunction(event,'tab4')" class="button-default tablinks" href="javascript:void(0);">Tincidunt</button></li>
          <li><button onclick="testFunction(event,'tab5')" class="button-default tablinks" href="javascript:void(0);">Condimentum</button></li>
        </ul>

        <div class="dropdown">
          <ul class="no-js">
            <li>
              <button id="filter-options" class="dropbtn">Select One</button>
              <ul id="filter-options-ul">

                <li><span>Blandit</span></li>
                <li><span>Aliquam</span></li>
                <li><span>Pharetra Maximus</span></li>
                <li><span>Tincidunt</span></li>
                <li><span>Condimentum</span></li>
              </ul>
            </li>
          </ul>
        </div>

        <div id="tab1" class="tabcontent" style="display:none;">
          <div class="left-column">
            <span class="strong"> This is the heading of the tabbed component and will be in bold</span>
            <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
              to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
            <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
              has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
              in the original.</p>

          </div>
          <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab65695_1800x800?$1800Hero$" alt="Kohler Image"></img>
          </div>
        </div>
        <div id="tab2" class="container tabcontent" style="display:none;">
          <div class="left-column">
            <span class="strong"> This is the heading of the tabbed component and will be in bold</span>
            <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
              to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
            <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
              has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
              in the original.</p>

          </div>
          <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/aab27241_1800x800" alt="Kohler Image"></img>
          </div>
        </div>
        <div id="tab3" class="tabcontent" style="display:none;">
          <div class="left-column">
            <span class="strong"> This is the heading of the tabbed component and will be in bold</span>
            <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
              to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
            <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
              has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
              in the original.</p>

          </div>
          <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab80843_rgb?crop=(102,1521,4876,2167)$" alt="Kohler Image"></img>
          </div>
        </div>
        <div id="tab4" class="tabcontent" style="display:none;">
          <div class="left-column">
            <span class="strong"> This is the heading of the tabbed component and will be in bold</span>
            <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
              to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
            <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
              has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
              in the original.</p>

          </div>
          <div class="right-column"><img src="https://s3.img-b.com/image/private/t_base,f_auto,c_lpad,h_800/product/Kohler/kohler-k-6331-alternate-image-4-473.jpg" alt="Kohler Image"></img>
          </div>
        </div>
        <div id="tab5" class="tabcontent" style="display:none;">
          <div class="left-column">
            <span class="strong"> This is the heading of the tabbed component and will be in bold</span>
            <p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
              to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
            <p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
              has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
              in the original.</p>

          </div>
          <div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab42000_1800x800?$1800Hero$" alt="Kohler Image"></img>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

注意:- 在桌面 View (选项卡 View )中可以使用相同的代码