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";
}

Javascript显示/隐藏，在页面加载时显示第一个div

3 个答案: