0

親よりも幅が大きく、親が に設定されている div を持つスクリプトがありますoverflow: hidden;。left大きな div の配置を設定して「ページ」を作成するJavaScript があります。リンクをクリックしてページ間を移動できます。

それはすべてうまく機能しますが、問題は、ある「ページ」要素から別の「ページ」要素にタブで移動すると、ページ間を移動するためにすべての左側の位置が完全に台無しになることです。

1 ページ目の入力ボックスの 1 つにフォーカスを設定し、2 ページ目に移動するまでタブを移動することで、私が設定したフィドルでこのバグを再現できます。

ここでデモをセットアップしました。

重要なコードは次のとおりです。

HTML:

<div class="form">
    <div class="pagesContainer">
        <div class="page" class="active">
            <h2>Page One</h2>
            [... Page 1 Content here...]
        </div>

        <div class="page">
            <h2>Page Two</h2>
            [... Page  Content here...]
        </div>
</div>

CSS:

.form {
    width: 400px;
    position: relative;
    overflow: hidden;
    border: 1px solid #000;
    float: left;
}

    .pagesContainer {
        position: relative; /*Width set to 10,000 px in js
    }

    .form .page {
        width: 400px;
        float: left;
    }

JS:

slidePage: function(page, direction, currentPage) {
    if (direction == 'next') {
        var animationDirection = '-=';
        if (page.index() >= this.numPages) {
            return false;
        }
    }
    else if (direction == 'previous') {
        var animationDirection = '+=';
        if (page.index() < 0) {
            return false;
        }
    }

    //Get page height
    var height = page.height();
    this.heightElement.animate({
        height: height
    }, 600);

    //Clear active page
    this.page.removeClass('active');
    this.page.eq(page.index()).addClass('active');

    //Locate the exact page to skip to
    var slideWidth = page.outerWidth(true) * this.difference(this.currentPage.index(), page.index());

    this.container.animate({
        left: animationDirection + slideWidth
    }, 600);

    this.currentPage = page;
}

主な問題は、たとえば 1 ページ目の入力ボックスから 2 ページ目の何かにタブ移動したときに何が起こっても、そこに移動しますが、css はまだ にいると見なすことですleft: 0px;。私は解決策を探していましたが、これまでグーグルが私に明らかにしたのは、スクロールバーのスクロールを停止する方法だけです。

ヘルプや提案をいただければ幸いです。

PS html はこのように設定されているため、javascript が無効になっている場合でも、1 つのページにすべて表示され、適切に機能します。

4

2 に答える 2

1

オーバーフローのある要素：非表示のままにスクロールがあり、スクロールバーはありません。これは、時には便利で、他の人を煩わせることがあります。これが、左の位置がゼロである理由ですが、要素のビューが変更されています。「ページ」を変更するときはscrollLeftをゼロに設定すると、うまくいくはずです。

于 2012-10-31T15:00:15.010 に答える
1

最初のタブの修正でフィドルを更新しました。フォームはhttp://jsfiddle.net/E7u9X/1/ です。基本的に、次のように、最後の要素がぼやけたら、タブ内の最初の「タブ可能な」要素に焦点を当てることができます。

$('.form input').last().blur(function(){
    $('.form input').first().focus();
});

(これは単なる例です。最初のアクティブな要素は他の要素である可能性があります)

于 2012-10-31T14:51:20.600 に答える