2017-12-18 17 views
1

我正在响应网站上开发选项卡式组件。它的工作方式是,在桌面和平板电脑上,我呈现一个菜单,然后单击菜单按钮时,我会显示相应的div。菜单选择下拉列表显示分格

桌面和平板电脑:

Desktop and Tablet for Menu

所以,当我选择不同的选项卡选项,我显示相应的标签内容。对于手机,我必须将此菜单转换为下拉菜单,我可以做到这一点。但点击下拉列表中的值时,我想呈现相应的标签内容,这是我无法做到的。我想在选择下拉值时显示相应的选项卡。任何帮助表示赞赏。请找到附加的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。当我点击下拉值时,我想达到同样的效果。任何帮助表示赞赏。

+0

您使用“”这样的错误的图像标签是像这样的“”完蛋了 –

+1

好这里是工作[小提琴](https://jsfiddle.net/qcwzrem0/1/ )你想要你使用错误的图像标签 –

回答

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>

注: - 当你在桌面视图您可以使用相同的代码(标签查看)

+0

这减少了我的标记了很多!我检查了答案,它工作得很好!即使上面提出的答案也很好! –

+0

@RamjiSeetharaman很高兴帮助你的朋友。 –

+0

@Anant - 没问题!只是答案是直截了当的!想要标记他们两个接受的答案! –

1

你只需要使用点击功能就像这样:

$("#filter-options-ul li").on("click", function(ev) { //notice the ev parameter 
    console.log('clicked'); 
    var val = $(this).find('span').html(); 
    switch(val){ 
     case 'Blandit': 
     testFunction(ev, 'tab1'); // pass the event to the click function 
     break; 
     case 'Aliquam': 
     testFunction(ev, 'tab2'); 
     break; 
     case 'Pharetra Maximus': 
     testFunction(ev, 'tab3'); 
     break; 
     case 'Tincidunt': 
     testFunction(ev, 'tab4'); 
     break; 
     case 'Condimentum': 
     testFunction(ev, 'tab5'); 
     break; 
    } 
    //$('.filter-options').css('border-right', '20px solid' + col); 
    $('.dropbtn').html(val); 
    }); 

这里是一个演示

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(ev) { 
 
    console.log('clicked'); 
 
    var val = $(this).find('span').html(); 
 
    //console.log(ev); 
 
    //return; 
 
    switch(val){ 
 
     case 'Blandit': 
 
     testFunction(ev, 'tab1'); 
 
     break; 
 
     case 'Aliquam': 
 
     testFunction(ev, 'tab2'); 
 
     break; 
 
     case 'Pharetra Maximus': 
 
     testFunction(ev, 'tab3'); 
 
     break; 
 
     case 'Tincidunt': 
 
     testFunction(ev, 'tab4'); 
 
     break; 
 
     case 'Condimentum': 
 
     testFunction(ev, 'tab5'); 
 
     break; 
 
    } 
 
    //$('.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>

+0

清楚点! –

1

那么你也可以在使用onclick事件您的下拉列表中的元素可实现移动视图的相同结果。

<ul id="filter-options-ul"> 
    <li><span onclick="testFunction(event,'tab1')>Aliquam</span></li> 
    . . . 
</ul>