2

我有如下的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>

我正在使用此代码将类添加到当前菜单:

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

这在除 IE8 之外的其他浏览器中运行良好。

让我知道这有什么问题。?

4

4 回答 4

5

要使 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/

于 2013-03-11T05:52:40.300 回答
1

我之前也遇到过类似的问题,原来是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);
};
于 2013-03-11T05:56:48.347 回答
0

我认为您可以使用以下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

于 2013-03-11T05:50:32.473 回答
0

我不认为有一个有效的html标签叫做<navi>......<nav>如果我没记错的话应该是

和你的选择器,

 $('nav a[href^="' + location.pathname.split("/")[1] + '"]').closest('li').addClass('select');
于 2013-03-11T05:50:53.353 回答