0

我不是最擅长 jQuery 的，所以如果这是一个简单的问题，请原谅我。我已经创建了一个导航菜单活动状态功能点击这里查看演示

active它在 Chrome、Firefox、Safari 中运行良好，但是我注意到在 IE8中单击链接时该类没有出现。我的 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

在几乎把我的头烧掉之后：

尝试注释掉所有 console.log 事件。我在虚拟机中运行 IE8，如果我触发了任何 console.log 事件，javascript 将停止工作。它不会在 console.log 之后运行任何其他 javascript 代码。

所以：尝试注释掉/删除所有 console.log - 这是一个 IE8 错误，因为之前有 alert(); 调试东西。

深入挖掘：IE8 中的 console.log 发生了什么？（感谢神井）

于 2013-11-14T08:15:31.363 回答
0

我没有 IE8 的工作版本（太可怕了！）.. 但既然你的“this”已经是你点击的按钮，为什么不把最后一行改成这个：

                $(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 回答