如何根據選定的選項卡更改選項卡內容

Question

我從已經開發的腳本中提取了以下代碼。 我需要根據單擊的項目更改此文本。

例如，如果有人單擊Home按鈕，我需要將此 div 更改為其他文本，就像您同樣單擊“主頁”一樣。 只是我需要在同一頁面中導航到不同的文本部分。

這提供了我所需要的完全沒有一個功能。 我可以看到以下文本部分每次都是靜態的。

<div style="padding:0 16px">
  <h3>Subnav/dropdown menu inside a Navigation Bar</h3>
  <p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div>

我希望這可以使用 jQuery/JavaScript 來完成。

提前致謝！！

 body { font-family: Arial, Helvetica, sans-serif; margin: 0; } .navbar { overflow: hidden; background-color: #333; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .subnav { float: left; overflow: hidden; } .subnav .subnavbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .subnav:hover .subnavbtn { background-color: red; } .subnav-content { display: none; position: absolute; left: 0; background-color: red; width: 100%; z-index: 1; } .subnav-content a { float: left; color: white; text-decoration: none; } .subnav-content a:hover { background-color: #eee; color: black; } .subnav:hover .subnav-content { display: block; }

 <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="navbar"> <a href="#home">Home</a> <div class="subnav"> <button class="subnavbtn">About <i class="fa fa-caret-down"></i></button> <div class="subnav-content"> <a href="#company">Company</a> <a href="#team">Team</a> <a href="#careers">Careers</a> </div> </div> <div class="subnav"> <button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button> <div class="subnav-content"> <a href="#bring">Bring</a> <a href="#deliver">Deliver</a> <a href="#package">Package</a> <a href="#express">Express</a> </div> </div> <div class="subnav"> <button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button> <div class="subnav-content"> <a href="#link1">Link 1</a> <a href="#link2">Link 2</a> <a href="#link3">Link 3</a> <a href="#link4">Link 4</a> </div> </div> <a href="#contact">Contact</a> </div> <div style="padding:0 16px"> <h3>Subnav/dropdown menu inside a Navigation Bar</h3> <p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p> </div> </body>

Answer 1

 // This is classes that you need to add for it to work

     <p class="paragraph">Hover over the "about", "services" or 
 "partners" link to see the sub navigation menu.</p>
     <a class="home" href="#home">Home</a>   


 // And this is your javascript code

    const home= document.querySelector('.home')
    const paragraph=document.querySelector('.paragraph')
    
    home.onclick=function(){
    paragraph.innerHTML="You are now in a home page"
    }

 // Hope it helps!

如何根據選定的選項卡更改選項卡內容

問題描述

1 個解決方案

解決方案1
0 2022-06-13 15:52:10

如何根據選定的選項卡更改選項卡內容

問題描述

1 個解決方案

解決方案1 0 2022-06-13 15:52:10

解決方案1
0 2022-06-13 15:52:10