0

アプリケーションにタブナビゲーションの作業コピーがあります。jqueryをlatest（1.7.2）に更新しようとしました。このため、jqueryWebサイトからjquery-1.7.2.min.jsをダウンロードしました。これを更新した後、次の行が期待どおりに機能しませんtabContainers.hide().filter(':member').show();

これが完全なjqueryメソッドです。

                $(function () {
                var tabContainers = $('div.tabs > div');
                tabContainers.hide().filter(':member').show();

                $(window).bind('hashchange', function () {
                    var hash = window.location.hash || '#member';        
                    tabContainers.hide();
                    tabContainers.filter(hash).show();
                    $('div.tabs ul.tabNavigation a').removeClass('selected');
                    $('a[hash=' + hash + ']').addClass('selected');
                   document.getElementById("submitform").action="newaction.action"+hash;
                });

                $(window).trigger( "hashchange" );
            });

これがhtmlの部分です

                <ul class="tabNavigation">
                    <li><a href="#member">Tab1 </a></li>
                    <li><a href="#tab2">tab2</a></li>
                    <li><a href="#tab3">tab3</a></li>
               </ul>
               <div id="member">content goes here</div>
               <div id="tab2 . . .

更新：： memberを#memberまたは：firstに変更して、最初のdivのコンテンツをロードしますが、それでも最初のliが選択されません。（[メンバー]タブ）

4

3 に答える 3

1

まず、ハッシュ変更ハンドラーが機能していると、起動時に行tabContainers.hide().filter(':member').show();が無効になり$(window).trigger("hashchange");ます。したがって、修正を試みることtabContainers.hide().filter(':member').show();は無駄であり、ステートメントを削除することができます。

2番目：、にはクロスブラウザの問題がありlocation.hashます。つまり、一部のブラウザは先頭に「＃」が付いた文字列を返し、一部は返さないという問題があります。これには、返される文字列を正規化する必要があります。

これらの要因を考慮に入れて、次のことを試してみてください。

$(function() {
    var tabContainers = $('div.tabs > div'),
        submitform = $("#submitform");

    $(window).on('hashchange', function () {
        var hash = (location.hash=='' || location.hash=='#') ? '#member' : location.hash;
        var hashNormalized = (hash.match(/^#/)) ? hash : '#'+hash;
        tabContainers.hide().filter(hashNormalized).show();
        $('div.tabs ul.tabNavigation a').removeClass('selected').filter(function() {
            return this.hash == hashNormalized;
        }).addClass('selected');
        submitform.attr('action', 'newaction.action' + hashNormalized);
    }).trigger('hashchange');
});

Opera11.64およびIE9でテスト済み。必ずFFでテストしてください

デモを見る

アンカーをフィルタリングする.filter(function(){...})アプローチは、jQueryのバージョン間の違いからあなたを免れるはずです。

于 2012-06-04T14:04:52.330 に答える
1

このフィドルを確認してください 。1.3.2以前のバージョンではfilter('#id')機能filter(':id')しますが、機能しません。どのように機能したかわかりません。

に更新tabContainers.hide().filter(':member').show();しtabContainers.hide().filter('#member').show()ます。

于 2012-06-04T07:09:51.330 に答える
0

これのいずれかを使用する必要があります

 tabContainers.hide().filter('#member').show();

また

tabContainers.hide().filter(':first').show();

id を持つ最初の div を表示するにはmember。

そして、対応するものを強調するためにa

これを変える

$('a[hash=' + hash + ']').addClass('selected');

に

$('a[href=' + hash + ']').addClass('selected');

hash属性名ではないので、href.

于 2012-06-04T08:43:17.887 に答える