Question

请帮我解决以下问题

我有一个导航栏，有3个按钮： 1.主页2.信息3.重新启动

info和restart按钮是php页面。 1.主页按钮，显示内部写的内容

我想在页面加载时默认显示主页按钮内容。目前我的导航栏的工作原理是，它获取所有3个标签内容并隐藏它。它仅在单击按钮时显示内容。以下是代码

function openCity(evt, cityName) {
    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(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

<style>
body {font-family: "Lato", sans-serif;}

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
</style>

<body>
<div class="tab" >
  <button class="tablinks" onclick="openCity(event, 'Home')" id="defaultOpen"><b>Home</b></button>
  <button class="tablinks" onclick="openCity(event, 'Info')"><b>Info</b></button>
  <button class="tablinks" onclick="openCity(event, 'Restart')"><b>Restart</b></button>
</div>
<div id="Home" class="tabcontent">
  <h3><font face="arial" /><u>Information About Web Page</u></h3>

  <p>
  Hello World ! 
</p>
</div>
<div id="Info" class="tabcontent">
  <h3>Information</h3>
  <p>
<?php
        include('a.php');
     ?></p>
</div>

<div id="Restart" class="tabcontent">
  <h3><font face="arial" />restart</h3>
  <p>
<?php
        include('restart.php');
        ?></p>

</div>
</body>

当我使用document.getElementById（“defaultOpen”）时.focus（）;我无法在页面加载时默认打开主页选项卡。

Answer 1

目前，它显示Hi，直到您单击另一个菜单项。然后它抓取altText属性并显示该文本。

这就是你想要的吗？

＆＃13;

function openCity(evt, cityName) {
    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(cityName).style.display = "block";
    evt.currentTarget.className += " active";
    
    var defaultOpen = document.getElementById('defaultOpen');
    defaultOpen.getElementsByTagName('b')[0].innerHTML = defaultOpen.getAttribute('altTxt');
}

// Get the element with id="defaultOpen" and click on it
//document.getElementById("defaultOpen").click();

＆＃13;

<style>
body {font-family: "Lato", sans-serif;}

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
</style>

＆＃13;

<body>
<div class="tab" >
  <button class="tablinks" onclick="openCity(event, 'Home')" id="defaultOpen" altTxt="Home"><b>Hi</b></button>
  <button class="tablinks" onclick="openCity(event, 'Info')"><b>Info</b></button>
  <button class="tablinks" onclick="openCity(event, 'Restart')"><b>Restart</b></button>
</div>
<div id="Home" class="tabcontent" style="display: block">
  <h3><font face="arial" /><u>Information About Web Page</u></h3>

  <p>Hello World !</p>
</div>
<div id="Info" class="tabcontent">
  <h3>Information</h3>
  <p>
<?php
        include('a.php');
     ?></p>
</div>

<div id="Restart" class="tabcontent">
  <h3><font face="arial" />restart</h3>
  <p>
<?php
        include('restart.php');
        ?></p>

</div>
</body>

＆＃13;

Answer 2

执行此操作，在身体加载后执行主页单击操作。它将自动触发主页单击。

添加更改您的身体标签

<body onload="openCity(event, 'Home')">

//others code

</body>

默认情况下，当页面加载

2 个答案: