选择Dropdown值显示div
问题描述 投票：1回答：3
我正在开发一个响应式网站，我正在开发一个标签式组件。它的工作方式是，在桌面和平板电脑中，我渲染菜单，然后单击菜单按钮，我会显示相应的div。
菜单的桌面和平板电脑：
因此，当我选择不同的选项卡选项时，我会显示相应的选项卡内容。对于移动设备，我必须将此菜单转换为Dropdown，我能够做到这一点。但是点击下拉列表值，我想渲染相应的标签内容，我无法做到这一点。我想在选择下拉值时显示相应的选项卡。任何帮助表示赞赏。请找到附带的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。单击下拉值时，我想实现相同的功能。任何帮助表示赞赏。
3个回答
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>注意： - 在桌面视图上可以使用相同的代码（Tabs VIEW）
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>1
投票
投票
那么你也可以在你的下拉列表中的onclick元素上使用span事件来实现移动视图的相同结果。
<ul id="filter-options-ul">
<li><span onclick="testFunction(event,'tab1')>Aliquam</span></li>
. . .
</ul>
最新问题
- KMP 库与 AdMob API 交互
- 有没有办法让 Visual Studion 默认为上次保存的窗口布局？ [已关闭]
- 如何以数据框的形式检索Bootstrap统计数据？
- 重新格式化 print_r() 输出以排除数组键并用逗号分隔值
- onClick 触发页面刷新并将 useParams 挂钩中的页面参数设置为“未定义”
- javascript 电子邮件混淆到底有多安全？
- 我是 flutter 新手，我尝试将一些数据写入在 Firebase 中创建的集合中，我收到这些警告，以及实现它的任何建议
- Laravel 多对多关系给出错误的结果
- std::numeric_limits::epsilon() 用于双精度算术
- 检查git仓库中的特定文件是否已更改
- 在 VS Code 中显示完整文档
- 使用 IOS 模拟器的 VScode flutter 项目上的 Swift 编译器错误（Xcode）
- 在gitlab管道中隐藏密码
- InsufficientS3BucketPolicyException：检测到存储桶的 S3 存储桶策略不正确
- VMOVDQA 和 VMOVAPS 之间的区别？
- jooq-codegen-maven 插件无法解析 sql 查询
- jooq-codegen-maven 插件无法解析 sql 查询中的 json 列
- 如何使用 Keycloak SSO 配置设置 Directus？
- 绕过WDA_EXCLUDEFROMCAPTURE
- 如何更改已在 Python3 Kivy 中绘制的矩形的颜色？
© www.soinside.com 2019 - 2024. All rights reserved.