【JavaScript编程实操12】DOM实操_Tab切换

前言

        本次主要是针对Javascript阶段的DOM模型的实操练习，主要实现当鼠标悬停在导航链接上时，显示对应的内容，并且高亮显示当前选中的链接，大家可以在实操的过程中更加深入地理解JavaScript中DOM模型的知识，并熟悉它们的应用。

知识点：

这段代码涉及到以下几个DOM知识点：

        ① querySelector 和 querySelectorAll: 这两个方法用于通过 CSS 选择器来获取文档中的元素。querySelector 返回文档中匹配选择器的第一个元素，而querySelectorAll 返回匹配的所有元素。

        ② setAttribute 和 removeAttribute：setAttribute 方法用于设置指定元素上的属性值，removeAttribute 方法用于移除指定元素上的属性。

        ③onmouseenter 事件：当鼠标移入指定元素时触发的事件。

        ④闭包 (Closure): 使用了一个立即执行函数表达式 (IIFE) 来创建闭包，以便在循环中保存每次迭代的变量 i 的值。这样可以确保在 lis[i].onmouseenter 函数中能够正确地访问到 i 的值。

        ⑤循环遍历: 使用 for 循环遍历 lis 元素集合，为每个 lis 元素绑定 onmouseenter 事件处理程序。

        ⑥DOM操作：了解如何使用JavaScript访问和操作DOM元素，例如获取元素、修改元素属性、添加/删除元素等。

        ⑦事件处理：使用事件处理程序（Event Handlers）来监听和响