Question

我正在尝试在网页加载时预先选择标签。基本上，当您在边栏中填充选项卡时，它将变为灰色，但是当网页首次加载时，它将被取消选中。

这是代码。

<!DOCTYPE html>
<html>
<head>
    <title>Example title</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
<div>
    <div class="w3-sidebar w3-bar-block w3-black w3-card-2" style="width:130px">
    <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Ex1')">Example 1</button>
    <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Ex2')">Example 2</button>
</div>
<div style="margin-left:130px">
    <div id="Ex1" class="w3-container tab w3-animate-left" >
        <h2>Example 1 header</h2>
        <p>
            Example 1 text
        </p>
    </div>  
    <div id="Ex2" class="w3-container tab" style="display:none">
    <h2>Example 2 Header</h2>
        <p>
            Example 2 text.
        </p>
    </div>
</div>
<script>
    function openLink(evt, animName) {
      var i, x, tablinks;
      x = document.getElementsByClassName("tab");
      for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablink");
      for (i = 0; i < x.length; i++) {
         tablinks[i].className = tablinks[i].className.replace(" w3-grey", "");
      }
          document.getElementById(animName).style.display = "block";
      evt.currentTarget.className += " w3-grey";
    }
</script>

Answer 1

您的按钮 Ex1 和 Ex2 而不是示例1 和 Exemple2的onclick属性中的正确ID不匹配

使用onload命令加载页面时，选择HTML选项卡

1 个答案: