0

jqueryfromdesignersのjQueryTabs関数を使用していますが、最初の例のみが機能します。これが私が使用するスクリプトコードです。

    <script type="text/javascript" charset="utf-8">
$.noConflict();
        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();

            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            }).filter(':first').click();
        });
    </script>

タブを表示するためのデモコードは次のとおりです。

<div class="tabs">
  <!-- tabs -->
  <ul class="tabNavigation">
    <li><a href="#first">Send a message</a></li>
    <li><a href="#second">Share a file</a></li>
    <li><a href="#third">Arrange a meetup</a></li>
  </ul>

  <!-- tab containers -->
  <div id="first">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div id="second">
    <p>Sed do eiusmod tempor incididunt.</p>
  </div>
  <div id="third">
    <p>Ut enim ad minim veniam</p>
  </div>
</div>

私はすでに自分の使用のためにコードを変更しました。tab-content-divに、phpを介して取得した情報が表示されるようになりました。このコンテンツには、クリックするとページをリロードする多くのリンクが含まれています。

ユーザーが＃tab2のリンクをクリックすると、ページがリロードされ、最後に選択された＃tab2が表示されるようにするにはどうすればよいですか？これで、常に＃tab0...が表示されます。

これについてのヒントをいただければ幸いです。

4

3 に答える 3

0

URLを使用してハッシュタグを追加する必要があります。ページの読み込み時に、を使用してハッシュにアクセスできますwindow.location.hash。ハッシュタグに基づいて、対応するタブを選択することができます

したがって、あなたの場合、単純なworaroundは

$(document).ready(function(){
     tabContainers.hide();
     tabContainers.filter(window.location.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
     return false;

});
于 2012-05-05T16:26:05.537 に答える
0

お返事ありがとうございます。

いくつかのバリエーションを試しましたが、何もうまくいきませんでした...

次のコードを使用すると、別の呼び出しでタブスクリプトの下にあなたからの最初のコードを実装しましたが、何も起こりません:

    <script type="text/javascript" charset="utf-8">
$.noConflict();
        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();

            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            }).filter(':first').click();
        });
    </script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
     tabContainers.hide();
     tabContainers.filter(window.location.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
     return false;

});
</script>

タブ (たとえば、タブ #3) を選択し、リンクをクリックすると、サイトがリロードされますが、それでもタブ #1 が表示されます...

私が試した2番目のバージョン：

    <script type="text/javascript" charset="utf-8">
$.noConflict();
        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();

            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            }).filter(':first').click();
        });
    </script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
     tabContainers.hide();
     tabContainers.filter(window.location.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
     return false;

});
</script>

前と同じように、サイトがリロードされ、タブ#1 が表示されます...

3 番目のバージョンでは、タブはすべて非表示になっています。最初にタブをクリックして表示する必要があります...

    <script type="text/javascript" charset="utf-8">
$.noConflict();
        $(function () {
            var tabContainers = $('div.tabs > div');
            tabContainers.hide().filter(':first').show();

            $('div.tabs ul.tabNavigation a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.tabs ul.tabNavigation a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            }).filter(':first').click();


$(document).ready(function(){
     tabContainers.hide();
     tabContainers.filter(window.location.hash).show();
     $('div.tabs ul.tabNavigation a').removeClass('selected');
     return false;
});

});
</script>

クリックしてサイトをリロードすると、タブが再び非表示になります...

これを機にもう一度見て頂ければ幸いです。これを実行するために何をすべきかわかりません...

乾杯！

于 2012-05-08T12:21:26.623 に答える
0

クッキーと一緒にご利用いただけます 

$( ".selector" ).tabs({ cookie: { expires: 30 } });
于 2012-05-05T16:31:01.277 に答える