0

私は jQuery が得意ではないので、簡単な質問でしたらご容赦ください。ナビゲーション メニューのアクティブ状態関数を作成しました。デモはこちらをクリックしてください

Chrome、Firefox、Safari では正常に動作しますが、IE8 ではactiveリンクをクリックしてもクラスが表示されないことに気付きました。私のjQueryに何か問題がありますか?

$(document).ready(function () {
    $('.proBtn').click(function () {
        $('li').removeClass('active');
        $('li a').removeClass('blue');
        $(this).parent().addClass('active');
        $(this).parent().children('.proBtn').addClass('blue');
    });
});
4

3 に答える 3

0

私はIE8の動作バージョンを持っていません（恐ろしい！）..しかし、「これ」はすでにクリックしているボタンであるため、最後の行を次のように変更しないでください：

                $(this).addClass('blue');

ここに見られるように（私が言ったように：テストできません）：http://jsfiddle.net/vXmNU/1/

編集

親をliに一致させるようにフィドルを更新しました：http://jsfiddle.net/vXmNU/2/

$(this).parent("li").addClass('active');
于 2013-09-19T11:33:32.000 に答える
0

このコード スニペットは、jsfiddle デモに基づいていますが、CSS と JS がわずかに改善されています。私はIE8を持っていないので、自分で試してみて、コメントで教えてください.

編集：私は自分でテストしました。IE8で動作しています。ただし、ページで JS を実行するには、[ブロックされたコンテンツを許可する] をクリックする必要があるかもしれません。

ここに画像の説明を入力

// JavaScript code

$(function() {
  $('.proBtn').on('click', function() {
    $('.active').removeClass('active');
    $(this).parent().addClass('active');
  });
});
/* CSS code */

body { background: #e8e8e8; }
ul { margin: 0; padding: 0; list-style: none; }
ul:after { content: ""; display: block; clear: both; }
ul li { float: left; width: 16.66%; }
ul li a:hover, ul .active a { background: #fff; color: #1d5ea8; }
ul li a {
  display: block;
  text-decoration: none;
  font-family: helvetica, sans-serif;
  font-weight: bold;
  color: #6a6f75;
  font-size: 12px;
  text-align: center;
  padding: 10px 0;
  border-radius: 4px;
  transition: all 0.4s;
}
<!-- HTML code -->

<div id="wrapper">
  <div class="top-block">
    <ul>
      <li class="active"><a href="#" class="proBtn">Home</a></li>
      <li><a href="#" class="proBtn">Edit Profile</a></li>
      <li><a href="#" class="proBtn">Like'd</a></li>
      <li><a href="#" class="proBtn">Lists</a></li>
      <li><a href="#" class="proBtn">Followers</a></li>
      <li><a href="#" class="proBtn">Following</a></li>
    </ul>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

于 2016-09-05T14:48:42.327 に答える
0

ほとんど頭を燃やした後：

すべての console.log イベントをコメントアウトしてみてください。仮想マシンで IE8 を実行していますが、console.log イベントがトリガーされると、javascript が機能しなくなります。console.log の後に他の JavaScript コードは実行されません。

そのため: console.log をすべてコメント アウト/削除してみてください。以前は alert(); があったため、これは IE8 のバグです。物事をデバッグする。

より深く掘り下げるために: IE8 の console.log はどうなりましたか? (カムイのおかげ)

于 2013-11-14T08:15:31.363 に答える