1
我正在响应网站上开发选项卡式组件。它的工作方式是，在桌面和平板电脑上，我呈现一个菜单，然后单击菜单按钮时，我会显示相应的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。当我点击下拉值时，我想达到同样的效果。任何帮助表示赞赏。
您使用“![]()
”这样的错误的图像标签是像这样的“![]()
”完蛋了 –
好这里是工作[小提琴]（https://jsfiddle.net/qcwzrem0/1/ ）你想要你使用错误的图像标签 –