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

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

转载作者：行者123 更新时间：2023-11-30 11:26:25

我在一个响应式网站上工作，我正在开发一个选项卡式组件。它的工作方式是，在台式机和平板电脑中，我呈现一个菜单，然后在单击菜单按钮时，我会像这样显示相应的 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。单击下拉值时，我想实现相同的目的。感谢您的帮助。

最佳答案

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

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 )中可以使用相同的代码

关于javascript - 选择下拉值显示一个div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47862678/

文章推荐： java - 使用 minimal-json 和 Gson 进行 JSON 解析

文章推荐： ios - RXswift，重复可观察直到完成

文章推荐： ios - 识别长按 UITableViewCell 的真实索引路径

JQuery 拉
我试图让我的 jQuery 脚本从单击的链接中提取 url，然后将其插入到我的视频标签中。有什么建议吗？我试过拼接我从 .html() 中得到的内容，但引号总是搞砸了。

Docker 拉 “unexpected EOF”
我遇到了 docker 的问题。场景是这样的:我们使用Codebuild+Packer+docker创建AMI，用于deploy。在这一步中，我们从 Artifactory 中提取图像，并且除了提取
Javascript 拉/推单个/多个
我目前正在学习 RxJS。在文档中，我找到了这个数组。我尝试在谷歌上搜索“pull and push javascript”，但我什至不知道如何调用这些实体/概念。我不明白那是什么意思？我假设 S
html - 推/拉 - 基础
Title 在小屏幕上，我首先需要标题，然后是文本字段，但在中等以上的屏幕上，我需要相反的方式 - 我已经尝试过推和拉，但它们无法工作 - 有什么想法吗？最佳答案根据 Swa
c++ - ZeroMQ 推/拉
zmq 的某些部分未以可预测的方式运行。我正在使用 VS2013 和 zmq 3.2.4。为了不在我的 pubsub 框架中“丢失”消息 [旁白:我认为这是一个设计缺陷。我应该能够首先启动我的订阅者
html - Bootstrap 嵌套列利用推/拉
我正在编写一个使用嵌套 Bootstrap 列的页面。我正在使用推/拉让列在移动设备上切换位置，而且效果很好。但是，在桌面上我遇到了一些奇怪的间距问题。嵌套列偏移到父列的右侧。我设置了一个 fidd
docker 拉: operation not permitted
在拉取一些 docker 镜像(但不是全部)时出现此错误: failed to register layer: Error processing tar file(exit status 1): op
docker - 无法从本地 docker 注册表推/拉
我创建了一个 Kubernetes 集群，并为每个节点安装了 docker。当我尝试使用 docker push local_registry_addr:port/image_id 将图像拉取或推送
mercurial - 何时隐式推/拉 Mercurial 书签？
没有明确地推/拉单个书签，书签何时从 repo 复制/更新到 repo？在我对两个本地存储库的测试中，我无法推断出一致的行为。有时从 A 到 B 或 B 到 A 的推/拉会复制/更新书签，有时不会。
html - Bootstrap 列排序的实际用例(推、拉)
在 Bootstrap 3 文档中，他们给出了以下使用 push 和 pull 类更改列顺序 (http://getbootstrap.com/css/#grid-column-ordering) 的
css - 拉/推中的 Bootstrap 故障
从这个问题开始Three column Bootstrap layout with left sidebar at bottom我了解了 Bootstrap 列推拉。下面的代码片段几乎可以得到我想要
python - 如何将单个选项传递给 gitpython 的推/拉？
许多 Repo 函数的签名包括 **kwargs，其中文档说，您可以将参数传递给底层包装的 git 命令。但是，*args 没有位置。为了传递类似标志的参数，如 --all。我原以为它们会像 my_r
android - 带进度条的 adb 推/拉
如果您将大文件推送/拉到设备上，这真的很烦人，现在无法知道它有多远。是否可以运行 adb push 或 adb pull 并使用“bar”实用程序获取进度条？这里的主要问题是我认为 adb 需要两个
heroku - 如何使用 Gitkrakent 推/拉 Heroku？
当我尝试使用 Gitkrakent 向/从 Heroku 推/拉时，GitKraken 告诉我: "Please log in to continue" 请求的“用户/登录”是什么？ (我个人 Her
docker - 拉 github 项目时 Jenkins 出现无效凭证错误
我在 docker 容器中有一个 Jenkins 2.150.1。要安装这个 Jenkins，我只需使用 jenkinsci/blueocean:1.9.0图片。我创建了一个管道，然后尝试使用我的
jenkins - 用 Jenkins 做 docker 拉
我想使用 Jenkins 做下一步: 1- docker pull 2- docker run -i -t 我已经在jenkins上安装了docker插件，但是这可行吗？ docker plugi
eclipse - 如何在本地 Mercurial 存储库中保留未提交的更改，同时仍然推/拉？
如果我正在处理一些我不想提交的文件，我只需保存它们。然后我有其他文件想要推送到服务器，但是如果其他人对存储库进行了更改，并且我将它们拉下来，它会要求我 merge 或 rebase ..但是这些选项中
拉 og :image 时 Facebook 错误
无论出于何种原因，我在 FB 上共享链接时尝试使用的图像都无法加载。给出的确切错误是: 提供了og:image，无法下载。发生这种情况的原因有多种，例如您的服务器使用不受支持的内容编码。爬虫接受 de
Android 4.3 ADB 推/拉
今天我买了三星 Galaxy Note 3，它配备了 Android 4.3。由于它太新了，我找不到根植我设备的方法，所以我尝试使用 adb 连接……我失败了。所以，我用了这个 D:\android
testing - Airflow 测试模式 xcom 拉/推不工作
我尝试通过 airflow cli test 命令测试 2 个任务` 第一个任务运行，自动将最后一个控制台推送到 xcom，我按预期在 Airflow GUI 中看到了值 some value 当我通

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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