0

私は次のコードを持っています：フィドル、異なるタブにURLを設定できるように設定するにはどうすればよいですか？URLにタブIDを追加しようとしましたが、機能しません。私もアンカーを試しましたが、うまくいきません。助けていただければ幸いです。

4

2 に答える 2

1

クリックイベントをバインドして、タブ切り替え機能を手動でトリガーする必要があります。

HTML：

<ul id="tabs">

      <li><a href="#tab1">test1</a></li>
      <li><a href="#tab2">test2</a></li>
      <li><a href="#tab3">test3</a></li>
      <li><a href="#tab4">test4</a></li>

</ul>

<span class="tablink" data-href="#tab1">link</span>

JS：

$('.tablink').click(function(){
   $('a[href="'+$(this).attr('data-href')+'"]').click();
});

このリンクは、タブをクリックしたかのように機能します。

タブをアクティブにするリンクが見つかり、クリックイベントが発生します。

askerのHTMLに合うように編集

于 2012-07-30T14:56:41.233 に答える
1

これはとても簡単にできます。リストは表示順にタブ自体に対応しているため、IDは不要であり、次のように実行できます。

HTML

<ul id="tabs">
    <li><a href="http://domain.com/#tab1">test1</a></li>
</ul>

<div>
      <div class="container">Some content1</div>
</div>

JavaScript

var tabs = $('#tabs a');
var content = $('.container');
var current = 0;

tabs.click( function(event) {
    // get which element was clicked
    var pos = tabs.index ($(event.target) );
    // remove current active class
    tabs.eq(current).removeClass('active');
    // fade out current element
    content.eq(current).fadeOut( function() {
        //afterwards set current to selected, update class and fade in content
        current = pos;
        tabs.eq(current).addClass('active');
        content.eq( current ).fadeIn();
        // append hash to url
        window.location.hash = tabs.eq(current).attr('href');
    });

    event.preventDefault();
});​

これは、URLにアンカーを追加する行です。

window.location.hash = tabs.eq(current).attr('href');

これはフィドルでは機能しないことに注意してください。または、この行を省略して、上記のソースコードで行ったように実際のURLを追加することもできます。

また、使用するセレクターが少なく、少し短くなるように、コードを最適化しました。また、active（すべての要素にクラスを適用する代わりに）現在の要素に単一のクラスを使用しinactiveます。あなたはただあなたのスタイルを調整する必要があります。

また、デフォルトで最初の要素を表示し、他のすべての要素を非表示にするCSSを追加しました。JavaScriptは必要ありません。

.container {
    display:none;
}

.container:first-child {
    display:block;
}

フィドル

http://jsfiddle.net/insertusernamehere/hCWMj/

于 2012-07-30T15:06:44.590 に答える