使用onload命令使用

问题描述：

加载页面时选择制作HTML选项卡我试图在网页加载时预先选择一个制表符。本质上，当您在侧边栏中切换标签时，它会变成灰色，但是当网页第一次加载时，它将被取消选中。使用onload命令使用

这是代码。

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

答

你不会的onclick您的按钮练习1和练习2的属性，你匹配正确的ID的代替例1和Exemple2

window.onload = function() { 
 
     document.getElementsByClassName("w3-button")[0].click(); 
 
    } 
 
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.target.className += " w3-grey"; 
 
    }

.w3-grey { 
 
    background-color: gray; 
 
}

<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, 'Example1')">Example 1</button> 
 
    <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Example2')">Example 2</button> 
 
</div> 
 
<div style="margin-left:130px"> 
 
    <div id="Example1" class="w3-container tab w3-animate-left" style="display:none"> 
 
     <h2>Example 1 header</h2> 
 
     <p> 
 
      Example 1 text 
 
     </p> 
 
    </div> 
 
    <div id="Example2" class="w3-container tab" style="display:none"> 
 
    <h2>Example 2 Header</h2> 
 
     <p> 
 
      Example 2 text. 
 
     </p> 
 
    </div> 
 
</div>

好的，谢谢你，我改变了原来的标签中的数据值。但是这也没有帮助我的情况。这不是由事件ID造成的。 –

我编辑我的回应。你有很多选择来做到这一点，你可以将它设置在你的HTML上： - 保留你的代码，只需将该类添加到你的按钮中 - 在js 的window.onload中设置一个初始状态 - 或者像我的例子触发事件初始化你的状态 – Kashkain

非常感谢你！我编辑了这些值以适合我的实际页面，并且完美地工作！ Ty Ty Ty。 –

使用onload命令使用

相关推荐