Question

让我们直截了当地说。

不幸的是，以下代码必须在IE8上运行。

应该找到当前网页的网址与 nav 中存在的href标记的<a>属性匹配。然后将该标记的类从not-selected交换为selected，或默认将其添加到第一个<a>标记。

HTML

<ul id="nav">
    <li><a class="not-selected" href="index.php"><span>Index Page</span></a></li>
    <li>
        <a class="not-selected" href="page1.php"><span>Page 1</span></a>
    </li>
    <li>
        <a class="not-selected" href="page2.php"><span>Page 2</span></a>
    </li>
</ul>

JavaScript（jQuery）

var url = $(document).attr('URL');

var isIndexPage = true;

var menu = $('#nav').children('li');

var anchors = menu.find('a');

anchors.each(function(index) {

    //   Is the href the same as the page?
    if ($(this).href != null && anchor.href == url)
    {
        $(this).first().addClass('selected');
        if ($(this).className.match(/\bnot\-selected\b/))
        $(this).first().removeClass('not-selected');

        indexPage = false;
     }
     else
     {
         //   remove class="selected" if it has that class
         if ($(this).className.match(/\bselected\b/))
         {
             $(this).first().removeClass('selected');
         }
         //   Add class="trigger"
         $(this).first().addClass('not-selected');                    
      }
 });

 if (isIndexPage)
 {
     menu[0].childNodes[0].setAttribute('class', 'selected');
 }

在脚本上，我在match()属性（应该是字符串）上调用className函数的行上出错。

为什么？

如何使用适用于IE8的jQuery或JavaScript修复它？

提前谢谢。

Answer 1

className是HTML元素的本机属性，而您尝试将其称为jQuery对象上的属性。做其中之一：

$(this)[0].className

或

$(this).attr('class')

旁注：你不是先检查元素是否有类 - 你假设它有。如果元素没有class属性，则第二个（jQuery）方法会出错，因为如果没有找到，则返回null（与原始className属性相反，在没有属性的情况下相应的class属性，默认为空字符串。）

Answer 2

你可以替换行

if ($(this).className.match(/\bselected\b/))

用这个

if ($(this).hasClass('selected'));

这简单得多。 “未选中”课程也是如此。

Answer 3

jQuery对象没有className属性，您可以使用hasClass方法检查元素是否有类：

if ($(this).hasClass('not-selected'))

但是，您根本不需要检查。您可以删除该类，如果它不在那里，那么该调用将无所事事。你可以这样做：

$(this).addClass('selected').removeClass('not-selected');

同样在else块中，您无需检查，只需删除并添加：

$(this).removeClass('selected').addClass('not-selected');

实际上，您甚至不需要if，您可以使用toggleClass和布尔值来实现。这将是你的整个循环：

anchors.each(function() {
  var sel = $(this).href != null && $(this).href == url;
  $(this).toggleClass('selected', sel).toggleClass('not-selected', !sel);
});

此外，您正在使用未定义变量anchor，您应该使用$(this)。改变这一行：

if ($(this).href != null && anchor.href == url)

为：

if ($(this).href != null && $(this).href == url)

Answer 4

我认为你应该使用普通的JS作为URL，jQuery作为其余的例子：

<强>的JavaScript

var path = window.location.pathname;

$.each($('#nav li a'), function(index, anchor) {
    if(path.indexOf($(anchor).attr('href')) != -1) {
        $('#nav li a').removeClass('selected');
        $(anchor).addClass('selected').removeClass('not-selected');
    }
});

以下是一个示例：http://jsfiddle.net/2rSqL/

如何在jQuery对象上调用JavaScript方法

4 个答案: