我的网站上有以下 jQuery 脚本,可以在不重新加载页面的情况下切换标签。我正在使用 jQuery 核心 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>