使用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>

來源

2017-06-01 Daniel S

你不會的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>

來源

2017-06-01 16:07:59 Kashkain

好的，謝謝你，我改變了原來的標籤中的數據值。但是這也沒有幫助我的情況。這不是由事件ID造成的。 –

我編輯我的迴應。你有很多選擇來做到這一點，你可以將它設置在你的HTML上： - 保留你的代碼，只需將該類添加到你的按鈕中 - 在js 的window.onload中設置一個初始狀態 - 或者像我的例子觸發事件初始化你的狀態 – Kashkain

非常感謝你！我編輯了這些值以適合我的實際頁面，並且完美地工作！ Ty Ty Ty。 –

使用onload命令使用

回答

相關問題