标题：探索 HTML 与 JavaScript 实现的选项卡切换效果

目录

一、HTML 结构设计

二、JavaScript 逻辑处理

一、HTML 结构设计

• 在给定的 HTML 代码中，整体结构是创建了多个div元素，每个div元素都包含一个ul（无序列表）和一个div（用于展示内容）。
• 每个ul元素中的li元素代表一个选项卡的标题，而与之对应的div元素中的子div元素则是每个选项卡标题对应的内容区域。

<div class="container">
    <ul class="tib_title">
        <li class="curent">title1</li>
        <li>title2</li>
        <li>title3</li>
        <li>title4</li>
    </ul>
    <div class="tab_content">
        <div>content1</div>
        <div>content2</div>
        <div>content3</div>
        <div>content4</div>
    </div>
</div>

• 这种结构设计清晰地将选项卡的标题和内容进行了分离，方便后续通过 JavaScript 进行交互操作。

二、JavaScript 逻辑处理

• 代码主要通过 JavaScript 实现了选项卡的切换效果。
• 获取元素与属性设置：
  • 首先，通过document.querySelectorAll获取所有的.container元素。对于每个.container，再获取其中的li元素（tab_title_li）和内容div元素（tab_content_div）。
  • 为每个li元素设置一个index属性，用于标记其在选项卡标题中的位置。

var container = document.querySelectorAll(".container");
for (h = 0; h < container.length; h++) {
    var tab_title_li = container[h].querySelectorAll("li");
    for (var i = 0; i < tab_title_li.length; i++) {
        tab_title_li[i].setAttribute("index", i);
    }
}

• 事件绑定与效果实现：
  • 为每个li元素绑定mouseenter事件。当鼠标移入某个li元素时，先清除所有li元素的类名，然后将当前li元素的类名设置为curent。
  • 根据当前li元素的index属性，找到对应的内容div元素，并将其display属性设置为block，其他内容div元素的display属性设置为none，从而实现选项卡内容的切换。

tab_title_li[i].onmouseenter = function () {
    var curent_tab_title_li = this.parentNode.children;
    for (var j = 0; j < curent_tab_title_li.length; j++) {
        curent_tab_title_li[j].className = "";
    }
    this.className = "curent";

    var curent_index = this.getAttribute("index");
    var curent_tab_content_div = this.parentNode.nextElementSibling.children;
    for (var k = 0; k < curent_tab_content_div.length; k++) {
        if (curent_index == k) {
            curent_tab_content_div[k].style.display = "block";
        } else {
            curent_tab_content_div[k].style.display = "none";
        }
    }
};

• 这种处理方式实现了一个简单而有效的选项卡切换效果，通过鼠标移入不同的选项卡标题，对应的内容区域就会显示出来。

通过对这段 HTML 和 JavaScript 代码的分析，我们可以看到如何巧妙地结合 HTML 的结构设计和 JavaScript 的交互逻辑来实现一个常见的网页交互效果 - 选项卡切换。这其中涉及到了元素的获取、属性的设置以及事件的绑定等多个方面的知识。