頁面加載時，默認情況下在導航欄中顯示按鈕內容“高”
[英]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.