Javascript顯示/隱藏，在頁面加載時顯示第一個div

Question

您能幫我在頁面加載時顯示第一個div嗎？

 function showStuff(element) { var tabContents = document.getElementsByClassName('tabContent'); for (var i = 0; i < tabContents.length; i++) { tabContents[i].style.display = 'none'; } var tabContentIdToShow = element.id.replace(/(\\d)/g, '-$1'); document.getElementById(tabContentIdToShow).style.display = 'block'; } 

 .tabContent { display:none; } 

 <a href="#contenuto"><div tabindex="1" class="tabs"><div id="tabs1" onclick="showStuff(this)">CARATTERISTICHE</div><div class="triangle-down-tab"></div></div></a> <a href="#contenuto" ><div tabindex="2" class="tabs"><div id="tabs2" onclick="showStuff(this)">DESTINATARI</div><div class="triangle-down-tab"></div></div></a> <a href="#contenuto"><div tabindex="3" class="tabs"><div id="tabs3" onclick="showStuff(this)"><i class="fa fa-calendar" style="color:#000000;"></i> CALENDARIO</div><div class="triangle-down-tab"></div></div></a> <a name="contenuto"><hr></a> <div id="tabs-1" class="tabContent"> <p>tab 1</p> </div> <div id="tabs-2" class="tabContent"> <p>tab 2 tab 2 </p> </div> <div id="tabs-3" class="tabContent"> <p>tab 3 tab 3 tab 3</p> </div> 

這是我的實際代碼。 jsFiddle謝謝！

Answer 1

您可以在文檔准備好后嘗試運行功能。

$(document).ready(function () {  
    showTab("tabs-1");

function showTab(divId) {
    //Get the element
    var divElement= document.getElementbyId(divId);
    //Set the css property  "display" from "none" to be "block";
    divElement..style.display = "block";
}
}):

頁面完全加載后，該函數應運行。 讓我知道事情的后續。

Answer 2

我當然可以 當您執行此類操作時，最好使用CSS。 這樣，當dom加載時，css將啟動，並且您想要的效果將顯示出來。

此外，它更易於理解和編寫代碼。

.tabContent  {
    display:none;
}
.tabContent.active  {
    display:block;
}

然后在HTML中

<div id="tabs-1" class="tabContent active">

因此，當頁面加載選項卡時，第一個處於活動狀態

然后在你的JS里

function showStuff(element)  {
    var tabContents = document.getElementsByClassName('tabContent');
    for (var i = 0; i < tabContents.length; i++) { 

      tabContents[i].className="tabContent";
    }

    var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
    document.getElementById(tabContentIdToShow).className="tabContent active";
}

更新小提琴！

https://jsfiddle.net/rb5c5095/3/

我們可以改善情況，因為我們知道所有選項卡在啟動時都將變為不可見，並且選項卡1將顯示。 因此，當單擊選項卡時，我們可以僅搜索具有.active類的選項卡並將其刪除，然后將.active類應用於新選項卡。 這樣做的好處是，您在html標記中添加的任何額外的CSS都不會被JS代碼刪除，但是我認為您可以解決這一問題，如果您無法回復我，我可以告訴您:-)

Answer 3

在這里，我要調用的函數（在頁面加載時）會調整所需塊的CSS； 可以通過$ {document）.ready;來實現。 我采用這種方法來避免使用jquery。

window.onload =  showDivOne();

function showDivOne() {
    document.getElementById("tabs-1").style.display = "block";
}