a:アクティブ プラス アニメーション クリック無効な解決策

:activeaddedanimationclick が無効であるという問題がよく発生します。今日は、URL ジャンプ履歴を記録しない方法を紹介します。 。

a タグ: アクティブ プラス アニメーションのクリックは無効です

私の CSS コードは次のとおりです:

.haorooms{  -webkit-animation: jpyd 1.5s cubic-bezier(0,.98,.44,1) both;  animation:  jpyd 1.5s cubic-bezier(0,.98,.44,1) both;}
.haorooms:active{ -webkit-animation: zoomOuts 1s ; animation: zoomOuts 1s; }

html コードは次のとおりです:

<a class="haorooms delay3 " href="/jingpin/"  ></a>

Apple 携帯電話では、タグのクリックは無効です。確認したところ、aタグがブロックされていません。原因は何でしょうか？の解き方？

この状況の理由は、アクティブには 1 秒間のアニメーションがあり、ボタンを押し続けるとジャンプする方法がありません。

a タグ: アクティブ プラス アニメーション クリック無効な解決策

実際、この問題は携帯電話で表示しているため、多くの解決策があり、アニメーションの再生後にジャンプする効果を追加できます。 touchend の後の ontouchend イベント アドレスにジャンプします。

ontouchend="window.location.href='/jingpin/'"

これを追加すると、長押ししても、クリックしても、押して終了しても、指定したアドレスにジャンプできます。

戻るときにページジャンプ履歴は記録されません

閲覧履歴の保存については、以前の記事で説明しました: SPA シングルページ Web アプリケーションと Ajax 非リフレッシュ ページ切り替え、履歴の前後方向のソリューションの紹介

ブラウザ履歴は

history.replaceState 
history.pushState(state, title, url)

を通じて操作できます。

しかし実際には、「ページ内にタブ切り替えラベルが2つあり、タブ切り替えによりブラウザのアドレスが記録される」など、閲覧履歴を記録する必要がない状況もあります。デフォルトで履歴が表示されます。したがって、戻るボタンをクリックすると、2 つのタブが切り替わり続けますが、実際には 2 つのタブを切り替えるのではなく、前のページに戻りたいのです。では、この状況を解決するにはどうすればよいでしょうか?

私たちはこれを考えました

location.replace(newURL)

replace() メソッドは履歴

オブジェクトに新しいレコードを生成しません。このメソッドを使用すると、新しい URL によって History オブジェクト内の現在のレコードが上書きされます。

したがって、次のようにコードを書くことができます:

<ul id="haorooms">
  <li><a href="http://www.haorooms.com/archives">标签一</a></li>
  <li><a href="http://www.haorooms.com/tools/index">标签二</a></li>
</ul>
$(&#39;#haorooms li  a&#39;).on(&#39;click&#39;, function (event) { //tab中a标签点击
    event.preventDefault();
    location.replace(this.href);
})

上記のコードは一部の携帯電話では無効を返すため、解決策は失敗します。

history.replaceState() メソッドと location.replace() メソッド

上記のメソッドは失敗したため、少し前に Zhang Xinxu マスターが同様のケースの解決策を示していたのを見て、そこから学びました。

解決策は次のとおりです:

$('#haorooms li  a').on('click', function (event) {
    event.preventDefault();
    history.replaceState(null, document.title, this.href.split('#')[0] + '#');
    location.replace('');
})

まず、HTML5 のhistory.replaceState() メソッドを使用して、現在の URL アドレスをポンド記号 # で終わる現在のリンク アドレスに置き換えます。

location.replace('') を実行します。現在のアドレスを更新します (この # は無視されます)

この解決策では、タブをどのように切り替えても、戻るをクリックした後は通常どおりページの前のページに戻ります。もうタブを切り替える必要はありません。

history.replaceStateはIE10からのみサポートされているため、以前のブラウザと互換性を持たせたい場合、またはPCで使用したい場合。 Zhang Dashen も関数をカプセル化しているのを見て、ここで借用します:

var fnUrlReplace = function (eleLink) {
    if (!eleLink) {
        return;
    }
    var href = eleLink.href;
    if (href && /^#|javasc/.test(href) === false) {
        if (history.replaceState) {
            history.replaceState(null, document.title, href.split('#')[0] + '#');
            location.replace('');
        } else {
             location.replace(href);
        }
    }
};

上記の関数は次のように適用できます

$('#haorooms li  a').on('click', function (event) {
  if (event && event.preventDefault) {
      event.preventDefault();
   }
   fnUrlReplace(this);
   return false;
})

これらの事例を読んだ後は、この方法を習得したと思います。その他の関連記事は PHP 中国語 Web サイトにあります。

関連書籍:

CSS で if 条件ハックを記述する方法

CSS Web ページの位置ずれに対処する方法

CSS3 を使用して照明とテキストアニメーションを作成する方法

以上がa:アクティブ プラス アニメーション クリック無効な解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。