时间戳

首页 > 解决方案 > 用于导航突出显示的 Javascript 在 IE 中不起作用

javascript - 用于导航突出显示的 Javascript 在 IE 中不起作用

问题描述

我有一个很棒的小脚本，用于突出显示我在 Stack Overflow 上找到的单页网站上的链接。它在 Chrome 和 Edge 中完美运行，但在 IE 中无法正常运行。这是一个片段。有什么建议么？

    <head>
    <style>
        html, body, header, nav, main, section, p {
            display: block;
        }
        
        html, body {
            height: 100%; 
            margin: 0; 
            padding: 0; 
            width: 100%;
        }
        
        header {
            background-color: #000; 
            height: 50px; 
            left: 0; 
            margin: 0; 
            padding: 0; 
            position: fixed; 
            top: 0; 
            width: 100%;
        }
        
        nav {
            height: 50px; 
            margin: 0 auto;
            max-width: 600px;
            padding: 0;
            position: relative;
            top: 0;
        }
        
        nav a {
            color: #FFF;
            display: inline-block;
            font-size: 24px;
            height: 50px;
            line-height: 50px;
            margin-right: 24px;
            text-decoration: none;
        }
        
        nav a:hover {
            color: #666;
        }
        
        nav a.active {
            color: red;
        }
        
        main {
            margin: 0; padding: 0;
        }
        
        section {
            box-sizing: border-box;
            color: blue;
            height: 100vh; 
            margin: 0 auto;
            max-width: 600px;
            padding: 50px;
        }
        
        .one {
            background-color: #FFF;
        }
        
        .two {
            background-color: #999;
        }
        
        .three {
            background-color: #666;
        }
        
        .four {
            background-color: #333;
        }
        
        .five {
            background-color: #111;
        }
        
        h1 {
            font-size: 48px; line-height: 1; margin: 0; padding: 0;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <a href="#one">One</a>
            <a href="#two">Two</a>
            <a href="#three">Three</a>
            <a href="#four">Four</a>
            <a href="#five">Five</a>
        </nav>
    </header>
    <main>
        <section id="one" class="one">
            <h1>Section One</h1>
        </section>
        <section id="two" class="two">
            <h1>Section Two</h1>
        </section>
        <section id="three" class="three">
            <h1>Section Three</h1>
        </section>
        <section id="four" class="four">
            <h1>Section Four</h1>
        </section>
        <section id="five" class="five">
            <h1>Section Five</h1>
        </section>
    </main>
    
    <!--Navigation Highlight Script-->
    
    <script>
        const links = document.querySelectorAll('nav a');
        const sections = document.querySelectorAll('section');

        function changeLinkState() {
          let index = sections.length;

          while(--index && window.scrollY + 1 < sections[index].offsetTop) {}

          links.forEach((link) => link.classList.remove('active'));
          links[index].classList.add('active');
        }

        changeLinkState();
        window.addEventListener('scroll', changeLinkState);
    </script>
</body>

这是完整的代码。当然，我已经省略了 html、title 和 meta 标签。任何帮助，将不胜感激。

标签： javascriptinternet-explorer

解决方案

我假设您使用的是 IE 11 浏览器。

IE 浏览器不支持箭头函数(=>)。这可能是您的代码无法在 IE 浏览器中运行的原因。

我已尝试修改您的代码，您可以尝试使用此代码进行测试，让我们知道它是否有效。

<!doctype html>
<html>
 <head>
    <title>demo</title>
    <style>
        html, body, header, nav, main, section, p {
            display: block;
        }
        
        html, body {
            height: 100%; 
            margin: 0; 
            padding: 0; 
            width: 100%;
        }
        
        header {
            background-color: #000; 
            height: 50px; 
            left: 0; 
            margin: 0; 
            padding: 0; 
            position: fixed; 
            top: 0; 
            width: 100%;
        }
        
        nav {
            height: 50px; 
            margin: 0 auto;
            max-width: 600px;
            padding: 0;
            position: relative;
            top: 0;
        }
        
        nav a {
            color: #FFF;
            display: inline-block;
            font-size: 24px;
            height: 50px;
            line-height: 50px;
            margin-right: 24px;
            text-decoration: none;
        }
        
        nav a:hover {
            color: #666;
        }
        
        nav a.active {
            color: red;
        }
        
        main {
            margin: 0; padding: 0;
        }
        
        section {
            box-sizing: border-box;
            color: blue;
            height: 100vh; 
            margin: 0 auto;
            max-width: 600px;
            padding: 50px;
        }
        
        .one {
            background-color: #FFF;
        }
        
        .two {
            background-color: #999;
        }
        
        .three {
            background-color: #666;
        }
        
        .four {
            background-color: #333;
        }
        
        .five {
            background-color: #111;
        }
        
        h1 {
            font-size: 48px; line-height: 1; margin: 0; padding: 0;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <a href="#one" class="">One</a>
            <a href="#two" class="">Two</a>
            <a href="#three" class="">Three</a>
            <a href="#four" class="">Four</a>
            <a href="#five" class="">Five</a>
        </nav>
    </header>
    <main>
        <section id="one" class="one">
            <h1>Section One</h1>
        </section>
        <section id="two" class="two">
            <h1>Section Two</h1>
        </section>
        <section id="three" class="three">
            <h1>Section Three</h1>
        </section>
        <section id="four" class="four">
            <h1>Section Four</h1>
        </section>
        <section id="five" class="five">
            <h1>Section Five</h1>
        </section>
    </main>
    
    <!--Navigation Highlight Script-->
    
    <script>
    
        const links = document.querySelectorAll('nav a');
        const sections = document.querySelectorAll('section');
        var reg = new RegExp('(^| )active($| )','g');

        function changeLinkState() 
    {
            let index = sections.length;
        var scrollTop = document.documentElement.scrollTop; 
        while(--index && scrollTop  + 1 < sections[index].offsetTop) 
        {
                
        }
            
        for (var i=0; i<links.length; i++) 
        {
                links[i].className = links[i].className.replace(reg,' ');
            }
        
        for (var i=0; i<links.length; i++) 
        {   
            if (sections[index].getAttribute("id")==links[i].getAttribute("href").substring(1)) 
            {           
                    links[i].className = "active";
            }
                
        }
    }
        changeLinkState();
        window.addEventListener('scroll', changeLinkState);
    </script>
</body>
</html>

输出：

在此处输入图像描述

推荐阅读