页面加载时，默认情况下在导航栏中显示按钮内容“高”
[英]Display a button content Hi in navigation bar by default when page loads
问题描述
请帮助我解决以下问题
我有一个带有3个按钮的导航栏：1.主页2.信息3.重新启动
信息和重新启动按钮是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（）;时 加载页面时，默认情况下，im无法打开主页选项卡。
2 个解决方案
解决方案1
0 2017-10-11 05:54:06
当前，它显示为Hi，直到您单击另一个菜单项。 然后，它获取altText属性并显示该文本。
那是你要的吗？
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();
<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" 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>
解决方案2
0 2017-10-11 05:55:48
执行此操作，在加载身体后执行主页点击操作，它将自动触发主页点击。
像这样添加更改您的身体标签
<body onload="openCity(event, 'Home')">
//others code
</body>
如何在页面加载时隐藏门户页面上的按钮并在稍后单击其他按钮时显示它
[英]How to hide a button on portal page when the page loads and display it later when clicked on other button
在javascript的导航栏中加载页面后，将删除活动类
[英]Active class is removed after page loads in navigation bar in javascript
在页面加载/刷新时设置容器的默认内容，然后在单击事件触发后更改
[英]Setting default content of container when page loads/refresh then changes after click event fires
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.