gpt4 book ai didi

jQuery 核心选项卡脚本 - 多个实例?

转载 作者:行者123 更新时间:2023-12-01 05:09:22 25 4
gpt4 key购买 nike

我的网站上有以下 jQuery 脚本,可以在不重新加载页面的情况下切换选项卡。我正在使用 jQuery core v1.3.2(不是 jQuery UI)

<!-- JS -->
<script type="text/javascript">
$(function() {
var tabify = function () {
var id = $('#content > div').hide().attr('aria-hidden', 'true').filter(window.location.hash || ':first').show().attr('aria-hidden', 'false').attr('id');
$('#content > ul > li').removeClass('selected').find('a[href=#' + id + ']').parent().addClass('selected');
}
setInterval(tabify, 100);
tabify();
});
</script>

<!-- HTML -->
<div id="content">

<ul>
<li><a href="#blog" role="tab">Blog</a></li>
<li><a href="#videos" role="tab">Videos</a></li>
<li><a href="#photos" role="tab">Photos</a></li>
</ul>

<div id="blog" role="tabpanel" aria-labelledby="tab1" aria-hidden="false">Blog Content</div>
<div id="videos" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">Videos Content</div>
<div id="photos" role="tabpanel" aria-labelledby="tab3" aria-hidden="true">Photos Content</div>

</div>

我想在同一页面上添加此脚本的另一个实例,但仅使用不同的变量名称复制/粘贴此脚本是行不通的。有什么想法吗?

编辑:这是我的第二个实例的 HTML 和 JS。问题是当我单击第二个实例中的选项卡时,它会隐藏第一个实例中的所有内容 div,反之亦然。我希望它们彼此独立。

<!-- JS -->
<script type="text/javascript">
$(function() {
var tabifyplayer = function () {
var idplayer = $('#discography > div').hide().attr('aria-hidden', 'true').filter(window.location.hash || ':first').show().attr('aria-hidden', 'false').attr('idplayer');
$('#discography > ul > li').removeClass('selected').find('a[href=#' + idplayer + ']').parent().addClass('selected');
}
setInterval(tabifyplayer, 100);
tabifyplayer();
});
</script>

<!-- HTML -->
<div id="discography">
<ul>
<li><a href="#cor-player" role="tab">Chance of Rain (2009)</a></li>
<li><a href="#debutcd-player" role="tab">Debut CD (2007)</a></li>
</ul>

<div id="cor-player" role="tabpanel" aria-labelledby="tab1" aria-hidden="false">Content Goes Here</div>
<div id="debutcd-player" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">Content Goes Here</div>
</div>

最佳答案

您的代码中有许多区域对元素进行了硬编码。我想您打算为新选项卡集使用另一个容器,因此如果您想要进行最小程度的更改,则需要确保更改代码的这些部分。

<script type="text/javascript">
$(function() {
var tabify = function () {
var id = $('#content > div') // Hard Coded content container.
.hide()
.attr('aria-hidden', 'true')
.filter(window.location.hash || ':first')
.show()
.attr('aria-hidden', 'false')
.attr('id');
$('#content > ul > li') // Hard Coded tab elements.
.removeClass('selected')
.find('a[href=#' + id + ']')
.parent()
.addClass('selected');
}
setInterval(tabify, 100);
tabify();
});
</script>

实际上,稍微调整一下一切,这样你就不会依赖于间隔,你可能会得到更好的服务。

$(function () {
var mine = $('#content > ul > li > a').click(function () {
$(this)
.parent()
.addClass('selected')
.siblings('li')
.removeClass('selected');

$('#content > div')
.filter($(this).attr('href') || ':first')
.show().attr('aria-hidden', 'false')
.siblings('div')
.hide().attr('aria-hidden', 'true');
});

if (window.location.hash != undefined) {
mine.filter('[href=' + window.location.hash + ']').click();
} else {
mine.filter(':first').click();
}
});

我相信第二个示例应该接近实现相同的效果(尽管查看您的 HTML 结构将帮助我验证这一点),并且更容易适应另一组元素。

关于jQuery 核心选项卡脚本 - 多个实例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3175237/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com