在我的 html 文件中隐藏 div

Question

在将 scrollNav.js 与我的 HTML 融合后，我目前正在使用它，我注意到我的 HTML 中显示了一些额外的 div。

但我只能通过 Google Devtools (f12) 检测到这个 div。这甚至可能吗？

这是我的 HTML 文件：

<section id="scrollNav-1" class="home scroll-nav_section">
                <div class="container">

                    <div class="tagline post-article">  <!--row1-->

                        <h2>HI !</h2>
                    </div>

这是根据 DevTools (f12) 的 div

<section id="scrollNav-1" class="home scroll-nav_section">
                <div class="container">

                    <nav class="scroll-nav fixed" role="navigation"><div class="scroll-nav__wrapper"><span class="scroll-nav__heading">Scroll To</span><ol class="scroll-nav__list"><li class="scroll-nav__item active in-view"><a href="#scrollNav-1" class="scroll-nav__link">HI !</a></li></ol></div></nav><div class="tagline post-article">    <!--row1-->

                        <section id="scrollNav-1" class="scroll-nav__section"><h2>HI !</h2></section>
                    </div>

*我现在的更新是我可以通过在 showheadline 中键入 False 来删除“滚动到”，并通过设置 display:none 来删除所有其他 div 的其余部分 变成这样：

但这不是我想要的结果。我希望它非常清楚，它来自哪里以及如何克服它，而不是仅仅隐藏它。

<section id="scrollNav-1" class="home scroll-nav_section">
                <div class="container">

                    <nav class="scroll-nav fixed" role="navigation"><div class="scroll-nav__wrapper"><ol class="scroll-nav__list"><li class="scroll-nav__item active in-view"><a href="#scrollNav-1" class="scroll-nav__link">HI !</a></li></ol></div></nav><div class="tagline post-article">  <!--row1-->

                        <section id="scrollNav-1" class="scroll-nav__section"><h2>HI !</h2></section>
                    </div>

脚本：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script type="text/javascript" src="js/scrollNav/jquery.scrollNav.min.js"></script>
    <script>    
       $('.post-article').scrollNav({
            sections: 'h2',
            subSections: false,
            sectionElem: 'section',
            className: 'scroll-nav',
            showHeadline: false,
            showTopLink: false,
            topLinkText: 'Top',
            fixedMargin: 40,
            scrollOffset: 40,
            animated: true,
            speed: 500,
            insertTarget: this.selector,
            insertLocation: 'insertBefore',
            arrowKeys: false,
            scrollToHash: true,
            onInit: null,
            onRender: null,
            onDestroy: null
        });

    </script>

如何删除我什至不知道它来自哪里的额外 div？

Answer 1

多余的 div 不是多余的。它是由您正在使用的滚动导航库创建的。许多插件和库在 dom 上创建额外的元素以添加它们的功能。没什么好担心的:)