[英]Create a tab system with html data attribute and jquery based on the value of the data
I'm in the process of improving my jquery skills. 我正在提高自己的jquery技能。
Here's my problem: 这是我的问题:
I'm creating a tab system with jquery and in my HTML I added the data attribute both to my order list and to my tab selected: 我正在使用jquery创建一个选项卡系统,并在HTML中将data属性添加到我的订单列表和所选的选项卡中:
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>
That could be one idea on how to tackle the problem. 那可能是解决问题的一个主意。 It doesn't work of course, I'm thinking about the data() function to retrieve the value with a different approach like:
当然这是行不通的,我正在考虑使用data()函数以不同的方法来检索值,例如:
tabContent.each(function() {
let value = $(this).data('cs-tab-index');
console.log(value);
if (value == match1) {
$(this).addClass("active");
}
});
Or a script like: 或类似的脚本:
tabContent.removeClass('active');
tabContent.data('cs-tab-index').val(1).addClass('active');
Both of them don't work. 他们两个都不起作用。
Any suggestion or someone who could point out where my mistake is? 有什么建议或可以指出我的错误所在的人吗?
You're not far off. 你不远。 This line:
这行:
tabContent.attr('data-cs-tab-index').val(match1).addClass(active);
is a little confused and should be: 有点困惑,应该是:
tabContent.filter('[data-cs-tab-index=' + match1 + ']').addClass("active");
which is find, within tabContent
, the node that has data-cs-tab-index
matching match1
. 在
tabContent
内找到具有data-cs-tab-index
匹配match1
的节点。 There are other ways to do this, such as using map. 还有其他方法可以做到这一点,例如使用地图。
Without making too many changes to your existing code, here's an updated version: 在不对现有代码进行太多更改的情况下,这是一个更新的版本:
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>
Using template literals : 使用模板文字 :
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.