Javascript 在使用onload命令加载页面时使用_Javascript_Html

Javascript 在使用onload命令加载页面时使用

javascript html

Javascript 在使用onload命令加载页面时使用,javascript,html,Javascript,Html,我正在尝试在网页加载时预选一个选项卡。基本上，当你点击侧边栏中的选项卡时，它将变为灰色，但当网页首次加载时，它将被取消选中这是代码 <!DOCTYPE html> <html> <head> <title>Example title</title> </head> <meta name="viewport" content="width=device-width, initial-scale=1"> &

我正在尝试在网页加载时预选一个选项卡。基本上，当你点击侧边栏中的选项卡时，它将变为灰色，但当网页首次加载时，它将被取消选中

这是代码

<!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>


示例标题
例1
例2
示例1标题

示例1文本

示例2标题

例2文本。

函数openLink（evt，animName）{
变量i，x，t；
x=document.getElementsByClassName（“选项卡”）；
对于（i=0；i

单击按钮的属性Ex1和Ex2而不是Example1和example2时，您与中的正确ID不匹配

window.onload=function（）{
document.getElementsByClassName（“w3按钮”）[0]。单击（）；
}
函数openLink（evt，animName）{
变量i，x，t；
x=document.getElementsByClassName（“选项卡”）；
对于（i=0；i


.w3灰色{
背景颜色：灰色；
}

例1
例2
示例1标题

示例1文本

示例2标题

例2文本。

谢谢，我更改了原始标记的数据值。但这也无助于我的处境。这不是由事件ID引起的。我编辑了我的回复。你有很多选择，可以在HTML上设置：-保留代码，只需在按钮中添加类-在窗口中设置初始状态。在js中加载-或者像我的示例一样触发事件以初始化状态谢谢！我编辑的值，以适应我的实际网页，它的作品完美！泰。