jQuery在Internet Explorer 8中不起作用

Question

我有如下的HTML：

<navi>
    <ul class="fnt_menu_secondo_livello" id="menu_secondo_livello">
        <li><a href="Retailers.aspx" title="Account Set up">Account Set Up</a></li>
        <li><a href="RetailerLogin.aspx" title="Retailer Login">Retailers Login</a></li>
        <li><a href="ManufacturerLogin.aspx" title="Manufacture Login">Manufacturers Login</a></li>
        <li><a href="PriceListRequest.aspx" title="Price List Request">Price List Request</a></li>
        <li><a href="Education.aspx" title="Price List Request">Education</a></li>
    </ul>
</navi>

我正在使用此代碼將Class添加到當前菜單：

$(document).ready(function() {
    $('navi a[href^="' + location.pathname.split("/")[1] + '"]').closest('li').addClass('select');
});

在IE8以外的其他瀏覽器中，此功能都可以正常工作。

讓我知道這有什么問題嗎？

Answer 1

要使HTML5元素與不兼容html5的瀏覽器一起使用，您需要添加htmlshiv http://code.google.com/p/html5shiv/

也如其他答案所示，它應該是nav而不是navi http://www.w3.org/WAI/GL/wiki/Using_HTML5_nav_element

在腳本部分添加以下內容

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

並像這樣修改選擇器

$(document).ready(function() {
    $('nav a[href^="' + location.pathname.split("/")[1] + '"]').closest('li').addClass('select');
});

這是John Resig的博客文章（禮貌@Ravi），您可能會發現有用的http://ejohn.org/blog/html5-shiv/

Answer 2

之前我也遇到過類似的問題，事實證明這是javascript中的split方法。 IE不支持在ie8及更低版本中進行拆分。 如果您將此添加到您的js中，它應該可以工作...

    /* Cross-Browser Split 1.0.1
(c) Steven Levithan <stevenlevithan.com>; MIT License
An ECMA-compliant, uniform cross-browser split method */

var cbSplit;

// avoid running twice, which would break `cbSplit._nativeSplit`'s reference to the native `split`
if (!cbSplit) {

cbSplit = function (str, separator, limit) {
    // if `separator` is not a regex, use the native `split`
    if (Object.prototype.toString.call(separator) !== "[object RegExp]") {
        return cbSplit._nativeSplit.call(str, separator, limit);
    }

    var output = [],
        lastLastIndex = 0,
        flags = (separator.ignoreCase ? "i" : "") +
                (separator.multiline  ? "m" : "") +
                (separator.sticky     ? "y" : ""),
        separator = RegExp(separator.source, flags + "g"), // make `global` and avoid `lastIndex` issues by working with a copy
        separator2, match, lastIndex, lastLength;

    str = str + ""; // type conversion
    if (!cbSplit._compliantExecNpcg) {
        separator2 = RegExp("^" + separator.source + "$(?!\\s)", flags); // doesn't need /g or /y, but they don't hurt
    }

/* behavior for `limit`: if it's...
- `undefined`: no limit.
- `NaN` or zero: return an empty array.
- a positive number: use `Math.floor(limit)`.
- a negative number: no limit.
- other: type-convert, then use the above rules. */
if (limit === undefined || +limit < 0) {
    limit = Infinity;
} else {
    limit = Math.floor(+limit);
    if (!limit) {
        return [];
    }
}

while (match = separator.exec(str)) {
    lastIndex = match.index + match[0].length; // `separator.lastIndex` is not reliable cross-browser

    if (lastIndex > lastLastIndex) {
        output.push(str.slice(lastLastIndex, match.index));

        // fix browsers whose `exec` methods don't consistently return `undefined` for nonparticipating capturing groups
        if (!cbSplit._compliantExecNpcg && match.length > 1) {
            match[0].replace(separator2, function () {
                for (var i = 1; i < arguments.length - 2; i++) {
                    if (arguments[i] === undefined) {
                        match[i] = undefined;
                    }
                }
            });
        }

        if (match.length > 1 && match.index < str.length) {
            Array.prototype.push.apply(output, match.slice(1));
        }

        lastLength = match[0].length;
        lastLastIndex = lastIndex;

        if (output.length >= limit) {
            break;
        }
    }

    if (separator.lastIndex === match.index) {
        separator.lastIndex++; // avoid an infinite loop
    }
}

if (lastLastIndex === str.length) {
    if (lastLength || !separator.test("")) {
        output.push("");
    }
} else {
    output.push(str.slice(lastLastIndex));
}

return output.length > limit ? output.slice(0, limit) : output;
};

cbSplit._compliantExecNpcg = /()??/.exec("")[1] === undefined; // NPCG: nonparticipating capturing group
cbSplit._nativeSplit = String.prototype.split;

} // end `if (!cbSplit)`

// for convenience...
String.prototype.split = function (separator, limit) {
    return cbSplit(this, separator, limit);
};

Answer 3

我認為您可以使用nav代替navi ：

<nav>
    <ul class="fnt_menu_secondo_livello" id="menu_secondo_livello">
        <li><a href="Retailers.aspx" title="Account Set up">Account Set Up</a></li>
        <li><a href="RetailerLogin.aspx" title="Retailer Login">Retailers Login</a></li>
        <li><a href="ManufacturerLogin.aspx" title="Manufacture Login">Manufacturers Login</a></li>
        <li><a href="PriceListRequest.aspx" title="Price List Request">Price List Request</a></li>
        <li><a href="Education.aspx" title="Price List Request">Education</a></li>
    </ul>
</nav>

注意： Internet Explorer 8和更早版本不支持該標記。

請參閱http://www.w3.org/WAI/GL/wiki/Using_HTML5_nav_element

Answer 4

我不認為有一個有效的html標簽稱為<navi> ...如果我沒記錯的話，它應該是<nav>

還有你的選擇器

 $('nav a[href^="' + location.pathname.split("/")[1] + '"]').closest('li').addClass('select');