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/ ）你想要你使用錯誤的圖像標籤 –