使用 html 数据属性和基于数据值的 jquery 创建选项卡系统
Create a tab system with html data attribute and jquery based on the value of the data
我正在提高 jquery 技能。
这是我的问题:
我正在使用 jquery 创建一个选项卡系统,在我的 HTML 中,我将数据属性添加到我的订单列表和我选择的选项卡中:
let tabHeader = $('.x-nav-tabs-item');
let tabContent = $('.x-tab-pane');
let attributevalue = tabContent.attr('data-cs-tab-index');
tabHeader.click(function() {
tabHeader.removeClass('active');
$(this).addClass('active');
let match1 = $('.active a').attr('data-cs-tab-toggle');
tabContent.removeClass('active');
console.log(match1);
tabContent.attr('data-cs-tab-index').val(match1).addClass(active);
});
<ul class="x-nav" data-x-element="tab_nav" data-x-params="orientation-horizontal">
<li class="x-nav-tabs-item">
<a data-cs-tab-toggle="1">For High school graduates (under 19 yrs):</a>
</li>
<li class="x-nav-tabs-item active">
<a data-cs-tab-toggle="2">For Mature Students (19 years+):</a>
</li>
<li class="x-nav-tabs-item">
<a data-cs-tab-toggle="3">For LPNs applying for the RDPN Access program:</a>
</li>
</ul>
<div class="x-tab-content">
<div class="x-tab-pane" data-cs-tab-index="1">
<ul>
<li>Graduation from Grade 12 with a C+ average</li>
<li>Grade 12 English (minimum grade B)*</li>
<li>Grade 12 Biology (minimum grade C)</li>
<li>Grade 11 Math (Foundations, Principles or Precalculus – minimum grade C)</li>
<li>Grade 10 Science (minimum grade C)</li>
</ul>
</div>
<div class="x-tab-pane" data-cs-tab-index="2">
<ul>
<li>Grade 12 English (minimum grade B)*</li>
<li>Grade 12 Biology (minimum grade C)</li>
<li>Grade 11 Math (Foundations, Principles or Precaculus – minimum grade C)</li>
</ul>
</div>
<div class="x-tab-pane" data-cs-tab-index="3">
<ul>
<li>Copy of Licensing as Practical Nurse</li>
<li>Proof of the equivalent of 2 years (3600 hours) full-time Work Experience as an LPN</li>
</ul>
</div>
</div>
这可能是解决问题的一个想法。它当然不起作用,我正在考虑使用 data() 函数使用不同的方法检索值,例如:
tabContent.each(function() {
let value = $(this).data('cs-tab-index');
console.log(value);
if (value == match1) {
$(this).addClass("active");
}
});
或者像这样的脚本:
tabContent.removeClass('active');
tabContent.data('cs-tab-index').val(1).addClass('active');
两者都不行。
有什么建议或有人可以指出我的错误所在吗?
你所要做的就是:
$('.x-nav a').on('click', function() {
$('.x-tab-pane')
.hide()
.filter('[data-cs-tab-index=' + $(this).attr('data-cs-tab-toggle') + ']')
.show();
});
并且here是一个演示
你离得不远了。这一行:
tabContent.attr('data-cs-tab-index').val(match1).addClass(active);
有点糊涂,应该是:
tabContent.filter('[data-cs-tab-index=' + match1 + ']').addClass("active");
这是在 tabContent
中找到具有 data-cs-tab-index
匹配 match1
的节点。还有其他方法可以做到这一点,例如使用地图。
在不对现有代码进行太多更改的情况下,这是一个更新版本:
let tabHeader = $('.x-nav-tabs-item');
let tabContent = $('.x-tab-pane');
tabHeader.click(function() {
tabHeader.removeClass('active');
$(this).addClass('active');
//let match1 = $('.active a').data('cs-tab-toggle');
let match1 = $(this).find("a").data('cs-tab-toggle');
tabContent.removeClass('active');
tabContent.filter('[data-cs-tab-index=' + match1 + ']').addClass("active");
});
.x-tab-pane { display:none; }
.x-tab-pane.active {
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="x-nav" data-x-element="tab_nav" data-x-params="orientation-horizontal">
<li class="x-nav-tabs-item">
<a data-cs-tab-toggle="1">For High school graduates (under 19 yrs):</a>
</li>
<li class="x-nav-tabs-item active">
<a data-cs-tab-toggle="2">For Mature Students (19 years+):</a>
</li>
<li class="x-nav-tabs-item">
<a data-cs-tab-toggle="3">For LPNs applying for the RDPN Access program:</a>
</li>
</ul>
<div class="x-tab-content">
<div class="x-tab-pane" data-cs-tab-index="1">
<ul>
<li>Graduation from Grade 12 with a C+ average</li>
<li>Grade 12 English (minimum grade B)*</li>
<li>Grade 12 Biology (minimum grade C)</li>
<li>Grade 11 Math (Foundations, Principles or Precalculus – minimum grade C)</li>
<li>Grade 10 Science (minimum grade C)</li>
</ul>
</div>
<div class="x-tab-pane" data-cs-tab-index="2">
<ul>
<li>Grade 12 English (minimum grade B)*</li>
<li>Grade 12 Biology (minimum grade C)</li>
<li>Grade 11 Math (Foundations, Principles or Precaculus – minimum grade C)</li>
</ul>
</div>
<div class="x-tab-pane" data-cs-tab-index="3">
<ul>
<li>Copy of Licensing as Practical Nurse</li>
<li>Proof of the equivalent of 2 years (3600 hours) full-time Work Experience as an LPN</li>
</ul>
</div>
</div>
let tabHeader = $('.x-nav-tabs-item');
let tabContent = $('.x-tab-pane');
let attributevalue = tabContent.attr('data-cs-tab-index');
tabHeader.click(function() {
tabHeader.removeClass('active');
tabContent.removeClass('active');
$(this).addClass('active');
let match1 = $('.active a').attr('data-cs-tab-toggle');
$(`.x-tab-pane[data-cs-tab-index="${match1}"]`).toggleClass('active');
});
.active {
background-color: red;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="x-nav" data-x-element="tab_nav" data-x-params="orientation-horizontal">
<li class="x-nav-tabs-item">
<a data-cs-tab-toggle="1">For High school graduates (under 19 yrs):</a>
</li>
<li class="x-nav-tabs-item active">
<a data-cs-tab-toggle="2">For Mature Students (19 years+):</a>
</li>
<li class="x-nav-tabs-item">
<a data-cs-tab-toggle="3">For LPNs applying for the RDPN Access program:</a>
</li>
</ul>
<div class="x-tab-content">
<div class="x-tab-pane" data-cs-tab-index="1">
<ul>
<li>Graduation from Grade 12 with a C+ average</li>
<li>Grade 12 English (minimum grade B)*</li>
<li>Grade 12 Biology (minimum grade C)</li>
<li>Grade 11 Math (Foundations, Principles or Precalculus – minimum grade C)</li>
<li>Grade 10 Science (minimum grade C)</li>
</ul>
</div>
<div class="x-tab-pane" data-cs-tab-index="2">
<ul>
<li>Grade 12 English (minimum grade B)*</li>
<li>Grade 12 Biology (minimum grade C)</li>
<li>Grade 11 Math (Foundations, Principles or Precaculus – minimum grade C)</li>
</ul>
</div>
<div class="x-tab-pane" data-cs-tab-index="3">
<ul>
<li>Copy of Licensing as Practical Nurse</li>
<li>Proof of the equivalent of 2 years (3600 hours) full-time Work Experience as an LPN</li>
</ul>
</div>
</div>
我正在提高 jquery 技能。
这是我的问题:
我正在使用 jquery 创建一个选项卡系统,在我的 HTML 中,我将数据属性添加到我的订单列表和我选择的选项卡中:
let tabHeader = $('.x-nav-tabs-item');
let tabContent = $('.x-tab-pane');
let attributevalue = tabContent.attr('data-cs-tab-index');
tabHeader.click(function() {
tabHeader.removeClass('active');
$(this).addClass('active');
let match1 = $('.active a').attr('data-cs-tab-toggle');
tabContent.removeClass('active');
console.log(match1);
tabContent.attr('data-cs-tab-index').val(match1).addClass(active);
});
<ul class="x-nav" data-x-element="tab_nav" data-x-params="orientation-horizontal">
<li class="x-nav-tabs-item">
<a data-cs-tab-toggle="1">For High school graduates (under 19 yrs):</a>
</li>
<li class="x-nav-tabs-item active">
<a data-cs-tab-toggle="2">For Mature Students (19 years+):</a>
</li>
<li class="x-nav-tabs-item">
<a data-cs-tab-toggle="3">For LPNs applying for the RDPN Access program:</a>
</li>
</ul>
<div class="x-tab-content">
<div class="x-tab-pane" data-cs-tab-index="1">
<ul>
<li>Graduation from Grade 12 with a C+ average</li>
<li>Grade 12 English (minimum grade B)*</li>
<li>Grade 12 Biology (minimum grade C)</li>
<li>Grade 11 Math (Foundations, Principles or Precalculus – minimum grade C)</li>
<li>Grade 10 Science (minimum grade C)</li>
</ul>
</div>
<div class="x-tab-pane" data-cs-tab-index="2">
<ul>
<li>Grade 12 English (minimum grade B)*</li>
<li>Grade 12 Biology (minimum grade C)</li>
<li>Grade 11 Math (Foundations, Principles or Precaculus – minimum grade C)</li>
</ul>
</div>
<div class="x-tab-pane" data-cs-tab-index="3">
<ul>
<li>Copy of Licensing as Practical Nurse</li>
<li>Proof of the equivalent of 2 years (3600 hours) full-time Work Experience as an LPN</li>
</ul>
</div>
</div>
这可能是解决问题的一个想法。它当然不起作用,我正在考虑使用 data() 函数使用不同的方法检索值,例如:
tabContent.each(function() {
let value = $(this).data('cs-tab-index');
console.log(value);
if (value == match1) {
$(this).addClass("active");
}
});
或者像这样的脚本:
tabContent.removeClass('active');
tabContent.data('cs-tab-index').val(1).addClass('active');
两者都不行。
有什么建议或有人可以指出我的错误所在吗?
你所要做的就是:
$('.x-nav a').on('click', function() {
$('.x-tab-pane')
.hide()
.filter('[data-cs-tab-index=' + $(this).attr('data-cs-tab-toggle') + ']')
.show();
});
并且here是一个演示
你离得不远了。这一行:
tabContent.attr('data-cs-tab-index').val(match1).addClass(active);
有点糊涂,应该是:
tabContent.filter('[data-cs-tab-index=' + match1 + ']').addClass("active");
这是在 tabContent
中找到具有 data-cs-tab-index
匹配 match1
的节点。还有其他方法可以做到这一点,例如使用地图。
在不对现有代码进行太多更改的情况下,这是一个更新版本:
let tabHeader = $('.x-nav-tabs-item');
let tabContent = $('.x-tab-pane');
tabHeader.click(function() {
tabHeader.removeClass('active');
$(this).addClass('active');
//let match1 = $('.active a').data('cs-tab-toggle');
let match1 = $(this).find("a").data('cs-tab-toggle');
tabContent.removeClass('active');
tabContent.filter('[data-cs-tab-index=' + match1 + ']').addClass("active");
});
.x-tab-pane { display:none; }
.x-tab-pane.active {
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="x-nav" data-x-element="tab_nav" data-x-params="orientation-horizontal">
<li class="x-nav-tabs-item">
<a data-cs-tab-toggle="1">For High school graduates (under 19 yrs):</a>
</li>
<li class="x-nav-tabs-item active">
<a data-cs-tab-toggle="2">For Mature Students (19 years+):</a>
</li>
<li class="x-nav-tabs-item">
<a data-cs-tab-toggle="3">For LPNs applying for the RDPN Access program:</a>
</li>
</ul>
<div class="x-tab-content">
<div class="x-tab-pane" data-cs-tab-index="1">
<ul>
<li>Graduation from Grade 12 with a C+ average</li>
<li>Grade 12 English (minimum grade B)*</li>
<li>Grade 12 Biology (minimum grade C)</li>
<li>Grade 11 Math (Foundations, Principles or Precalculus – minimum grade C)</li>
<li>Grade 10 Science (minimum grade C)</li>
</ul>
</div>
<div class="x-tab-pane" data-cs-tab-index="2">
<ul>
<li>Grade 12 English (minimum grade B)*</li>
<li>Grade 12 Biology (minimum grade C)</li>
<li>Grade 11 Math (Foundations, Principles or Precaculus – minimum grade C)</li>
</ul>
</div>
<div class="x-tab-pane" data-cs-tab-index="3">
<ul>
<li>Copy of Licensing as Practical Nurse</li>
<li>Proof of the equivalent of 2 years (3600 hours) full-time Work Experience as an LPN</li>
</ul>
</div>
</div>
let tabHeader = $('.x-nav-tabs-item');
let tabContent = $('.x-tab-pane');
let attributevalue = tabContent.attr('data-cs-tab-index');
tabHeader.click(function() {
tabHeader.removeClass('active');
tabContent.removeClass('active');
$(this).addClass('active');
let match1 = $('.active a').attr('data-cs-tab-toggle');
$(`.x-tab-pane[data-cs-tab-index="${match1}"]`).toggleClass('active');
});
.active {
background-color: red;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="x-nav" data-x-element="tab_nav" data-x-params="orientation-horizontal">
<li class="x-nav-tabs-item">
<a data-cs-tab-toggle="1">For High school graduates (under 19 yrs):</a>
</li>
<li class="x-nav-tabs-item active">
<a data-cs-tab-toggle="2">For Mature Students (19 years+):</a>
</li>
<li class="x-nav-tabs-item">
<a data-cs-tab-toggle="3">For LPNs applying for the RDPN Access program:</a>
</li>
</ul>
<div class="x-tab-content">
<div class="x-tab-pane" data-cs-tab-index="1">
<ul>
<li>Graduation from Grade 12 with a C+ average</li>
<li>Grade 12 English (minimum grade B)*</li>
<li>Grade 12 Biology (minimum grade C)</li>
<li>Grade 11 Math (Foundations, Principles or Precalculus – minimum grade C)</li>
<li>Grade 10 Science (minimum grade C)</li>
</ul>
</div>
<div class="x-tab-pane" data-cs-tab-index="2">
<ul>
<li>Grade 12 English (minimum grade B)*</li>
<li>Grade 12 Biology (minimum grade C)</li>
<li>Grade 11 Math (Foundations, Principles or Precaculus – minimum grade C)</li>
</ul>
</div>
<div class="x-tab-pane" data-cs-tab-index="3">
<ul>
<li>Copy of Licensing as Practical Nurse</li>
<li>Proof of the equivalent of 2 years (3600 hours) full-time Work Experience as an LPN</li>
</ul>
</div>
</div>