このJSスクリプトの最後にクリックイベントが発生しないようにするにはどうすればよいですか？

Question

'defaultOpen' IDのおかげで、Introタブがアクティブなタブとしてロードされないというエラーが表示されません。それはクリックされるまで色が変わらないので、クリックすることなくそのように見えるはずです。これはW3Schools HowTo lesson on Tabsの単純なコピーですが、何かが正しくありません。

function openContent(evt, contentType) { 
 
    var i, tabcontent, tabheads; 
 
    tabcontent = 
 
    document.getElementsByClassName('tabcontent'); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
    tabcontent[i].style.display = 'none'; 
 
    } 
 
    tabheads = 
 
    document.getElementsByClassName('tabheads'); 
 
    for (i = 0; i < tabheads.length; i++) { 
 
    tabheads[i].className = 
 
     tabheads[i].className.replace(' active', '') 
 
    } 
 
    document.getElementById(contentType).style.display = 'block'; 
 
    evt.currentTarget.className += ' active'; 
 
} 
 

 
document.getElementById('defaultOpen').click();

.outerDiv { 
 
    background-color: rgba(50, 50, 0, 0.7); 
 
} 
 
.innerDiv { 
 
    background-color: rgba(10, 10, 10, 0.7); 
 
    color: white; 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    align-items: flex-end; 
 
    margin: 25px; 
 
} 
 
.innerDiv p { 
 
    padding: 0 1.2rem; 
 
    margin: 0; 
 
    align-self: center; 
 
} 
 
ul.tabs { 
 
    display: flex; 
 
    align-items: center; 
 
    list-style-type: none; 
 
    margin: 1rem 0 0.3rem 0; 
 
    font-weight: 400; 
 
} 
 
.tabs li a { 
 
    padding: 0 1.2rem 0.5rem 1.2rem; 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    color: #96912d; 
 
    margin: 0.3rem 0.3rem 0.5rem 0.3rem; 
 
} 
 
.tabs li a:hover { 
 
    background-color: black; 
 
    color: yellow; 
 
} 
 
.tabs li a:focus, 
 
.tabs li a .active { 
 
    background-color: rgba(10, 10, 10, 0.7); 
 
    color: #fac819; 
 
} 
 
.under-tabs { 
 
    margin-top: 0; 
 
} 
 
.tabcontent { 
 
    display: none; 
 
}

<section> 
 
    <div class="outerDiv"> 
 
    <ul class="tabs"> 
 
     <li><a href="javascript:void(0)" class="tabheads" onclick="openContent(event,'intro')" id="defaultOpen">Intro</a> 
 
     </li> 
 
     <li><a href="javascript:void(0)" class="tabheads" onclick="openContent(event,'blog')">Blog</a> 
 
     </li> 
 
     <li><a href="javascript:void(0)" class="tabheads" onclick="openContent(event,'comments')">Comments</a> 
 
     </li> 
 
    </ul> 
 
    <div class="innerDiv under-tabs tabcontent" id="intro"> 
 
     <p> 
 
     This project is building a series of virtual colonies on the Moon. 
 
     </p> 
 
    </div> 
 
    <div class="tabcontent" id="blog"> 
 
     <iframe src="blogMain.html"></iframe> 
 
    </div> 
 
    <div class="tabcontent" id="comments"> 
 
     Comment section!!! 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

スタイルでエラーCSSで

.tabs li a:focus, .tabs li a.active { 
    background-color: rgba(10, 10, 10, 0.7); 
    color: #fac819; 
} 

があるクラスが要素に添付添付されているので、あなたはaタグと.activeクラスの間にスペースを持っています