HTML新手求助：网站Tab切换功能失效，请求技术支持

一、修正后的完整代码 #

HTML（含内联基础样式） #

<!DOCTYPE html>
<html>

<head>
    <link href="series.css" rel="stylesheet"/>
    <link href="commande.css" rel="stylesheet"/>
    <title class="titreprincipal">Les meilleures séries</title>
    <style>
        /* 基础Tab样式，区分激活状态 */
        .tablinks.active {
            background-color: #ccc;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="content"> 
        <ul class="navbar">
            <li>
                <a class="active" href="#">Accueil</a>
                <a href="commande.html">Commandes</a>
                <a href="notes.html">Notes des séries</a>
                <a class="right" href="infos.html">Informations</a>
            </li>
        </ul>
        <h1 class="h1_color">
            Les meilleures séries
        </h1>
        <div class="tab">
            <button class="tablinks active" onclick="changeTab(event, 'series')">Séries</button>
            <button class="tablinks" onclick="changeTab(event, 'animes')">Animés</button>
        </div>
        <!-- 修正：添加id并移除无效单引号 -->
        <div id="series" class="tabcontent">
            <div class="row">
                <div class="column col-33">
                    <div class="card">
                        <img src="breakingbad.jpg" alt="Image de Whalter White" class="avatar">
                        <div class="container">
                            <h4>Breaking bad</h4>
                        </div>
                        <form>
                            <button class="button primary2" formaction="breakingbad.html" formtarget="_self">
                                Accéder
                            </button>
                        </form>
                    </div>
                </div>
                <div class="column col-33">
                    <div class="card">
                        <img src="bettercallsaul.jpg" alt="Image de Saul Goodman" class="avatar">
                        <div class="container">
                            <h4>Better Call Saul</h4>
                        </div>
                        <form>
                            <button class="button primary2" formaction="bettercallsaul.html" formtarget="_self">
                                Accéder
                            </button>
                        </form>
                    </div>
                </div>
                <div class="column col-33">
                    <div class="card">
                        <img src="elcamino.jpg" alt="Image de Jesse Pinkman" class="avatar">
                        <div class="container">
                            <h4>El Camino</h4>
                        </div>
                        <form>
                            <button class="button primary2" formaction="elcamino.html" formtarget="_self">
                                Accéder
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- 修正：添加id属性 -->
        <div id="animes" style="display: none" class="tabcontent">
            <div class="row">
                <div class="column col-33">
                    <div class="card">
                        <img src="bleach.jpg" alt="Image de Ichigo" class="avatar">
                        <div class="container">
                            <h4>Bleach</h4>
                        </div>
                        <form>
                            <button class="button primary2" formaction="bleach.html" formtarget="_self">
                                Accéder
                            </button>
                        </form>
                    </div>
                </div>
                <div class="column col-33">
                    <div class="card">
                        <img src="naruto.jpg" alt="Image de Naruto" class="avatar">
                        <div class="container">
                            <h4>Naruto</h4>
                        </div>
                        <form>
                            <button class="button primary2" formaction="naruto.html" formtarget="_self">
                                Accéder
                            </button>
                        </form>
                    </div>
                </div>
                <div class="column col-33">
                    <div class="card">
                        <img src="onepiece.jpg" alt="Image des Mugiwara" class="avatar">
                        <div class="container">
                            <h4>One piece</h4>
                        </div>
                        <form>
                            <button class="button primary2" formaction="onepiece.html" formtarget="_self">
                                Accéder
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function changeTab(evt, target) {
            var i, tabcontent, tablinks;
            // 修正：通过class获取所有Tab内容元素
            tabcontent = document.getElementsByClassName("tabcontent");
            // 修正：循环条件改为遍历元素集合长度
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            // 修正：通过class获取所有Tab按钮元素
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                // 修正：用classList安全移除激活类
                tablinks[i].classList.remove("active");
            }
            // 显示目标Tab内容
            document.getElementById(target).style.display = "block";
            // 修正：用classList添加激活类
            evt.currentTarget.classList.add("active");
        }
    </script>
</body>
</html>

二、原代码关键错误及修正说明 #

HTML部分 #

• Tab内容容器缺少id属性：原代码中第一个Tab容器的class写法错误（多余单引号），且未设置id="series"，第二个容器也缺少id="animes"，导致JS无法通过getElementById定位元素。
• 修正：给每个Tab内容容器添加对应id，移除无效的单引号。

JavaScript部分 #

• 错误选择元素：用getElementById获取class属性的元素，这是API误用，应改用getElementsByClassName获取元素集合。
• 循环条件错误：直接用元素集合与数字比较（i < tabcontent），永远不会进入循环，需改为i < tabcontent.length。
• 类名操作不严谨：字符串替换replace(" active", "")可能误删内容，改用classList.remove/add("active")更安全，避免重复添加或误操作。

三、扩展到3个Tab标签的方法 #

无需修改JS代码，只需两步：

1. 添加第三个Tab按钮
   在.tab容器中新增按钮，指定目标id：

<div class="tab">
    <button class="tablinks active" onclick="changeTab(event, 'series')">Séries</button>
    <button class="tablinks" onclick="changeTab(event, 'animes')">Animés</button>
    <button class="tablinks" onclick="changeTab(event, 'films')">Films</button>
</div>

2. 添加对应Tab内容容器
   新增带id="films"的内容容器，默认隐藏：

<div id="films" style="display: none" class="tabcontent">
    <div class="row">
        <div class="column col-33">
            <div class="card">
                <img src="inception.jpg" alt="Image de Inception" class="avatar">
                <div class="container">
                    <h4>Inception</h4>
                </div>
                <form>
                    <button class="button primary2" formaction="inception.html" formtarget="_self">
                        Accéder
                    </button>
                </form>
            </div>
        </div>
        <!-- 可继续添加更多内容卡片 -->
    </div>
</div>

内容的提问来源于stack exchange，提问作者Alexis