我有一个 html 页面,其中有手风琴部分和按钮
btn-acc-tab
。当用户单击按钮时,部分 acc-tab
打开,每个部分都包含可以激活的链接 tab-link
。这些部分使用如下所示的 JQuery 脚本打开和关闭。我试图通过添加类 acc-tab collapse
来在页面加载时打开一个包含当前活动链接的部分 show
,而不是等待用户单击。我在这里可以找到的大多数答案都涉及在单击或其他事件时激活 show
类。简单地用 event
代替 onload
对我来说不起作用。我知道我错过了一些简单的东西,但我已经把头撞在墙上足够长的时间了,知道我自己不会看到它。我们将非常感谢您的帮助。
HTML 代码:
<div class="container">
<div class="accordion" id="accordion_Foo">
<div class="card">
<div class="card-header" id="heading_Foo_Bar">
<button class="btn btn-acc-tab" type="button" id="button_Foo_Bar" data-toggle="collapse" data-target="#collapse_Foo_Bar" aria-expanded="true" aria-controls="collapse_Foo_Bar">
<h4>Foo Bar</h4>
</button>
</div>
<div class="acc-tab collapse show" id="collapse_Foo_Bar" aria-labeledby="heading_Foo_Bar" data-parent="#accordion_Foo">
<ul class="tab-list">
<li class="btn tab-link active" data-target="Cat" data-id="button_Foo_Bar" tabindex="0" role="button" aria-expanded="true">
<a class="active" href="/Foo/Foo_Bar/Cat" target="_self">Cat</a>
</li>
<span class="sr-only">(current)</span>
<li class="btn tab-link" data-target="Dog" data-id="button_Foo_Bar" tabindex="0" role="button" aria-expanded="true">
<a class="" href="/Foo/Foo_Bar/Dog" target="_self">Dog</a>
</li>
<li class="btn tab-link" data-target="Mouse" data-id="button_Foo_Bar" tabindex="0" role="button" aria-expanded="true">
<a class="" href="/Foo/Foo_Bar/Mouse" target="_self">Mouse</a>
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header" id="heading_Foo_Foo">
<button class="btn btn-acc-tab" type="button" id="button_Foo_Bar" data-toggle="collapse" data-target="#collapse_Foo_Foo" aria-expanded="true" aria-controls="collapse_Foo_Foo">
<h4>Foo Foo</h4>
</button>
</div>
<div class="acc-tab collapse" id="collapse_Foo_Foo" aria-labeledby="heading_Foo_Foo" data-parent="#accordion_Foo">
<ul class="tab-list">
<li class="btn tab-link active" data-target="Bird" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
<a class="active" href="/Foo/Foo_Foo/Bird" target="_self">Bird</a>
</li>
<span class="sr-only">(current)</span>
<li class="btn tab-link" data-target="Fish" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
<a class="" href="/Foo/Foo_Foo/Fish" target="_self">Fish</a>
</li>
<li class="btn tab-link" data-target="Dinosaur" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
<a class="" href="/Foo/Foo_Foo/Dinosaur" target="_self">Dinosaur</a>
</li>
</ul>
</div>
</div>
</div>
</div>
jQuery 脚本:
(function ($) {
$.fn.replaceClass = function (pFromClass, pToClass) {
return this.removeClass(pFromClass).addClass(pToClass);
};
}(jQuery));
function clickAndPress(event) {
if(event.type === 'click'){
return true;
}
else if(event.type === 'keypress'){
var code = event.charCode || event.keyCode;
if((code === 32)|| (code === 13)){
return true;
}
}
else{
return false;
}
};
$(".tab-link").on("click keypress", function(){
if(clickAndPress(event) === true) {
var id = $(this).data('target')
var par_id = $(this).data('id');
$(".tab-content").replaceClass("d-block", "d-none");
$(".sr-only").remove();
$(document.getElementById(id)).replaceClass("d-none", "d-block");
$(".tab-link").removeClass("active");
if ($(".btn-acc-tab").hasClass("active")) {
$(".btn-acc-tab").removeClass("active");
};
$(this).addClass("active");
$(document.getElementById(par_id)).addClass("active");
$('<span class="sr-only">(current)</span>').insertAfter(".active");
}
});
$(document).ready(function(){
var active = $(".tab-link.active").data('target');
$(".acc-tab").addClass("show");
});
还尝试过 jQuery:
$(this).closest(".btn-acc-tab").addClass("active");
如果我正确理解你的问题,你想要的是将
show
类添加到 acc-tab collapse
元素,如果它至少有一个元素 <li>
,并且在页面加载时具有 active
类,对吧?如果是这样,我想你可以在 $(document).ready(function(){})
函数中使用这段代码:
$(".acc-tab").each(function() {
if ($(this).find('li.active').length > 0) {
$(this).addClass("show");
}
});
完整代码:
(function ($) {
$.fn.replaceClass = function (pFromClass, pToClass) {
return this.removeClass(pFromClass).addClass(pToClass);
};
}(jQuery));
function clickAndPress(event) {
if(event.type === 'click'){
return true;
}
else if(event.type === 'keypress'){
var code = event.charCode || event.keyCode;
if((code === 32)|| (code === 13)){
return true;
}
}
else{
return false;
}
};
$(".tab-link").on("click keypress", function(){
if(clickAndPress(event) === true) {
var id = $(this).data('target')
var par_id = $(this).data('id');
$(".tab-content").replaceClass("d-block", "d-none");
$(".sr-only").remove();
$(document.getElementById(id)).replaceClass("d-none", "d-block");
$(".tab-link").removeClass("active");
if ($(".btn-acc-tab").hasClass("active")) {
$(".btn-acc-tab").removeClass("active");
};
$(this).addClass("active");
$(document.getElementById(par_id)).addClass("active");
$('<span class="sr-only">(current)</span>').insertAfter(".active");
}
});
$(document).ready(function(){
var active = $(".tab-link.active").data('target');
$(".acc-tab").each(function() {
if ($(this).find('li.active').length > 0) {
$(this).addClass("show");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="container">
<div class="accordion" id="accordion_Foo">
<div class="card">
<div class="card-header" id="heading_Foo_Bar">
<button class="btn btn-acc-tab" type="button" id="button_Foo_Bar" data-toggle="collapse" data-target="#collapse_Foo_Bar" aria-expanded="true" aria-controls="collapse_Foo_Bar">
<h4>Foo Bar</h4>
</button>
</div>
<div class="acc-tab collapse" id="collapse_Foo_Bar" aria-labeledby="heading_Foo_Bar" data-parent="#accordion_Foo">
<ul class="tab-list">
<li class="btn tab-link active" data-target="Cat" data-id="button_Foo_Bar" tabindex="0" role="button" aria-expanded="true">
<a class="active" href="/Foo/Foo_Bar/Cat" target="_self">Cat</a>
</li>
<span class="sr-only">(current)</span>
<li class="btn tab-link" data-target="Dog" data-id="button_Foo_Bar" tabindex="0" role="button" aria-expanded="true">
<a class="" href="/Foo/Foo_Bar/Dog" target="_self">Dog</a>
</li>
<li class="btn tab-link" data-target="Mouse" data-id="button_Foo_Bar" tabindex="0" role="button" aria-expanded="true">
<a class="" href="/Foo/Foo_Bar/Mouse" target="_self">Mouse</a>
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header" id="heading_Foo_Foo">
<button class="btn btn-acc-tab" type="button" id="button_Foo_Bar" data-toggle="collapse" data-target="#collapse_Foo_Foo" aria-expanded="true" aria-controls="collapse_Foo_Foo">
<h4>Foo Foo</h4>
</button>
</div>
<div class="acc-tab collapse" id="collapse_Foo_Foo" aria-labeledby="heading_Foo_Foo" data-parent="#accordion_Foo">
<ul class="tab-list">
<li class="btn tab-link active" data-target="Bird" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
<a class="active" href="/Foo/Foo_Foo/Bird" target="_self">Bird</a>
</li>
<span class="sr-only">(current)</span>
<li class="btn tab-link" data-target="Fish" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
<a class="" href="/Foo/Foo_Foo/Fish" target="_self">Fish</a>
</li>
<li class="btn tab-link" data-target="Dinosaur" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
<a class="" href="/Foo/Foo_Foo/Dinosaur" target="_self">Dinosaur</a>
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header" id="heading_Foo_Foo">
<button class="btn btn-acc-tab" type="button" id="button_Foo_Bar" data-toggle="collapse" data-target="#collapse_Foo_Foo" aria-expanded="true" aria-controls="collapse_Foo_Foo">
<h4>Bar Foo</h4>
</button>
</div>
<div class="acc-tab collapse" id="collapse_Foo_Foo" aria-labeledby="heading_Foo_Foo" data-parent="#accordion_Foo">
<ul class="tab-list">
<li class="btn tab-link" data-target="Bird" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
<a class="" href="/Foo/Foo_Foo/Bird" target="_self">Chicken</a>
</li>
<li class="btn tab-link" data-target="Fish" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
<a class="" href="/Foo/Foo_Foo/Fish" target="_self">Cow</a>
</li>
<li class="btn tab-link" data-target="Dinosaur" data-id="button_Foo_Foo" tabindex="0" role="button" aria-expanded="true">
<a class="" href="/Foo/Foo_Foo/Dinosaur" target="_self">Lamb</a>
</li>
</ul>
</div>
</div>
</div>
</div>