如何将 HTML 标签更改为带有 JQuery 的另一个标签？

Question

我有一个带有 <h5>Header</h5> 标签的 header，我想在悬停它时将其更改为 <i class="material-icons>flash_on</i> 并在悬停时将其更改回

这是我的 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>

如何将 HTML 标签更改为带有 JQuery 的另一个标签？

How to Change HTML Tags to Another Tag with JQuery?

html

javascript

jquery

materialize