Question

我的标签已全部关闭＆＃39; （默认显示无）。我想在有人加载页面时自动打开一个。

网站here

这是我的javascript

function openProperty(evt, property) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(property).style.display = "block";
    evt.currentTarget.className += " active";
};

这里是html

<div class="oil-prop">
        <div class="tab">

          <button class="tablinks" onclick="openProperty(event, 'aroma')"><i class="icon-olive" aria-hidden="true"></i><br><span class="text-btn">aroma</span></button>
          <button class="tablinks" onclick="openProperty(event, 'flavour')"><i class="icon-drop" aria-hidden="true"></i><br><span class="text-btn">flavour</span></button>
          <button class="tablinks" onclick="openProperty(event, 'pairings')"><i class="icon-pairings" aria-hidden="true"></i><br><span class="text-btn">pairings</span></button>
          <button class="tablinks" onclick="openProperty(event, 'variety')"><i class="icon-leaf" aria-hidden="true"></i><br><span class="text-btn">variety</span></button>
        </div>

    <div id="aroma" class="tabcontent">

          <h3>Aroma</h3>
          <p>Medium-fruity with notes of <b>artichoke</b> and <b>green apple</b>.</p>      
    </div>

    <div id="flavour" class="tabcontent">       
          <h3>Flavour</h3>
          <p><b>Fresh fruity</b> taste with a mild <b>peppery</b> finish.</p>    
    </div>
    <div id="pairings" class="tabcontent">
          <h3>Pairings</h3>
          <p>Ideal with meat and fish. Goes well with vegetables, especially sweeter-tasting ones.</p>  
    </div>

    <div id="variety" class="tabcontent">   
          <h3>Olive Varieties</h3>
          <p><b>Leccino, Pendolino and Leccio del Corno</b></p>  
    </div>
    <div class="divider-prop">
    </div>
    <div id="tab-bg-div"></div>
    <div class="border-prop"></div>
</div>

如果有人可以提供帮助，我将非常感激！

Answer 1

试试这个：jsfiddle

function openProperty(evt, property) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(property).style.display = "block";
    evt.currentTarget.className += " active";
};

$( document ).ready(function() {
$( "button:first " ).trigger( "click" );
});

Answer 2

首先确保添加

.tabcontent {
   display:none;
}

在你的CSS中

。

您的脚本应如下所示：

var tabcontent = document.getElementsByClassName("tabcontent");
tabcontent[0].style.display = "block";  
function openProperty(evt, property) {
var i, tablinks;
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(property).style.display = "block";
evt.currentTarget.className += " active";
};

因为您希望元素显示为默认值（在这种情况下，我选择了第一个元素，但您可以根据需要进行更改）。

检查此jsfiddle，看它是否有效：https://jsfiddle.net/x68cvrt0/

默认情况下保持打开标签

2 个答案: