2

ページをリロードせずにタブを切り替えるために、サイトに次の 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>

このスクリプトの別のインスタンスを同じページに追加したいのですが、これを別の変数名でコピー/貼り付けするだけではうまくいきません。何か案は？

編集:これが 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>
4

2 に答える 2

1

コード内に要素をハードコードした領域が多数あります。新しいタブ セットに別のコンテナを使用するつもりだと思うので、最小限の変更を行う場合は、コードのそれらの部分を変更するようにしてください。

<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構造を見るとそれを確認するのに役立ちます）、別の要素のセットに適応するのが簡単になると思います.

于 2010-07-04T16:41:47.670 に答える
0

このページで良い解決策を見つけました: 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();
于 2010-07-05T00:19:01.597 に答える