Question

我无法在Internet Explorer 11上使用此代码。我知道此段导致了问题。如果我上传我的文件激活此代码，IE 11将我网站的整个部分完全空白。没有它，它将在我的网站上显示信息，但它显然不起作用。

我在http://caniuse.com/上查找了各种功能，根据它，只有部分支持removeClass和addClass，这可能是问题所在。是否有某种插件或不同的命令使其与IE 11兼容？

$(window).on('hashchange', function () {
    var ImageContainer = $('.tabs > div'),
    hash = window.location.hash !== '' ? window.location.hash: '#about';

    console.log(hash);

    ImageContainer.hide();
    ImageContainer.filter(hash).show();
    $('<img/>').removeClass('selected');
    $('a[href="' + hash + '"]', '.ImageContainer').addClass('selected');
}).trigger('hashchange');

编辑 - 标记

<div class="tabs">

<div id="about">    
<h3>Headline</h3>
<p>Body Text</p>
</div>

<div id="first">
<h3>Different Headline</h3>
<p>Different Body Copy</p>
</div>

</div>

<div id="owl-demo" class="owl-carousel owl-theme">

<div class="ImageContainer">
    <div id="Color">
    <h2>Headline</h2> 
</div>

<div class="photo grow">  
     <a href="#first" id="1">    
     <img src="" />
     </a>
     </div>

 <div class="ImageFooter" id="Purple">
     <p class="ImageContainerP">Below Text</p>
     </div>
  </div>

 </div>

Answer 1

您应该使用正确的选择器：

对于这个HTML：

<div class="ImageContainer">
    <a href="#1234"><img class="selected" src="" /></a>
</div>

JS：

$('img').removeClass('selected');
$('a[href="#1234"]', '.ImageContainer').addClass('selected');

输出：

<div class="ImageContainer">
    <a href="#1234" class="selected"><img src="" class=""></a>
</div>

在IE 11和FF 42上测试：

jsfiddle：http://jsfiddle.net/ghorg12110/h1xtty4n/

Answer 2

问题在于IE如何处理哈希。它不像其他浏览器那样默认为空字符串，默认为'＃'。此外，您应该在IE中设置可靠性的位置，而不是设置哈希值。

hash = window.location.hash !== '' ? window.location.hash: '#about';

变为

hash = window.location.hash;
if (hash !== '' || hash !== '#') {
   hash = '#about';
   window.location = hash;
}

标记未呈现，因为它没有重置条目上的哈希并给出错误消息“＃”不是过滤器的有效选择器。

IE 11 addClass + removeClass

2 个答案: