jQueryコアタブスクリプト - 複数のインスタンス?
-
02-10-2019 - |
質問
ページをリロードせずにタブを切り替えるために、私のサイトに次のjQueryスクリプトがあります。私はjqueryコアv1.3.2を使用しています(jqueryuiではありません)
<!-- 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>
同じページにこのスクリプトの別のインスタンスを追加したいのですが、さまざまな変数名でこれをコピー/貼り付けるだけでは機能しません。何か案は?
編集: これが2番目のインスタンスの私のHTMLとJSです。問題は、2番目のインスタンスでタブをクリックすると、最初のインスタンスですべてのコンテンツ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>
解決 2
このページで良い解決策を見つけました: jQueryタブ - ページ上の複数のセット
この方法でもコードの複製も少なくなります。 (それがしないのは、バックボタンを使用できることですが、私はそれで暮らすことができます。)
jQuery.fn.minitabs = function(speed,effect) {
var id = "#" + this.attr('id')
$(id + ">div:gt(0)").hide();
$(id + ">ul>li>a:first").addClass("selected");
$(id + ">ul>li>a").click(
function(){
$(id + ">ul>li>a").removeClass("selected");
$(this).addClass("selected");
$(this).blur();
var re = /([_\-\w]+$)/i;
var target = $('#' + re.exec(this.href)[1]);
var old = $(id + ">div");
old.hide();
target.show()
return false;
}
);
}
$('#tabset1').minitabs();
$('#tabset2').minitabs();
他のヒント
コードには、要素がハードコーディングされている多くの領域があります。新しいタブセットに別のコンテナを使用する予定だと思います。そのため、最小限の変更を求めている場合は、コードの部分を変更することを確認する必要があります。
<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();
}
});
2番目の例は、同じものを達成することに近づくべきだと思いますが(HTML構造を見るとそれを確認するのに役立ちます)、別の要素のセットに適応しやすくなります。
所属していません StackOverflow