如何使用 JQuery 將 HTML 標簽更改為另一個標簽？

Question

我有一個帶有<h5>Header</h5>標簽的 header，我想在 hover 時將其更改為<i class="material-icons>flash_on</i>並將其更改回 ZE0542F579DF58E81238ADE96

這是我的 html 代碼；

<nav class="nav-extended themed white">
    <div class="nav-wrapper">
        <!-- I WANT TO CHANGE THIS ON HOVER ==> --> <h5 id="charger">Şarj Aletleri</h5>
        <!-- TO THIS ==> <i class="material-icons">flash_on</i> -->
    </div>
    <div class="divider"></div>
    <div class="nav-content">
        <ul class="tabs themed">
           <li class="tab"><a class="active" href="#allchargers">tümü</a></li>
           <li class="tab"><a href="#syroxchargers">syrox</a></li>
           <li class="tab"><a href="#cepiumchargers">cepium</a></li>
           <li class="tab"><a href="#ttecchargers">ttec</a></li>
        </ul>
    </div>
</nav>

Answer 1

您不需要 JavaScript，您可以添加簡單的 CSS 來更改元素的顯示，例如

 .nav-wrapper.material-icons { display: none; }.nav-wrapper:hover #charger { display: none; }.nav-wrapper:hover.material-icons { display: block; }

 <nav class="nav-extended themed white"> <div class="nav-wrapper"> <h5 id="charger">Şarj Aletleri</h5> <i class="material-icons">flash_on</i> </div> <div class="divider"></div> <div class="nav-content"> <ul class="tabs themed"> <li class="tab"><a class="active" href="#allchargers">tümü</a></li> <li class="tab"><a href="#syroxchargers">syrox</a></li> <li class="tab"><a href="#cepiumchargers">cepium</a></li> <li class="tab"><a href="#ttecchargers">ttec</a></li> </ul> </div>

或者，如果您需要更改 HTML 內容，則可以使用 jQuery 進行更改，如下所示：

 $(function(){ $('.nav-wrapper').mouseenter(function(){ $(this).html('<i class="material-icons">flash_on</i>'); }); $('.nav-wrapper').mouseleave(function(){ $(this).html('<h5 id="charger">Şarj Aletleri</h5>'); }); });

 .nav-wrapper h5,i { display: inline-block; margin: 0; height: 30px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="nav-extended themed white"> <div class="nav-wrapper"> <h5 id="charger">Şarj Aletleri</h5> </div> <div class="divider"></div> <div class="nav-content"> <ul class="tabs themed"> <li class="tab"><a class="active" href="#allchargers">tümü</a></li> <li class="tab"><a href="#syroxchargers">syrox</a></li> <li class="tab"><a href="#cepiumchargers">cepium</a></li> <li class="tab"><a href="#ttecchargers">ttec</a></li> </ul> </div>