单击时更改div的内容（图标）

Question

我创建了一个列表，其中包含div，其中一个div使用令人敬畏的字体包含一个主页图标。 我希望单击时将字体图标更改为图片图标，并再次单击时将其更改回主页图标。 我需要使用Javascript吗？

 ul{ list-style-type: none; margin-top: 0; } li a{ text-decoration: none; color: black; font-size: 25px; } li{ width: 50px; height: 50px; display: inline-block; } #homecover{ width: 55px; height: 55px; margin-top: 150px; left: 47.5%; position: absolute; } #home{ position: absolute; z-index: 2; background-color: #F73933; border-radius: 50%; border: 2px solid #F73933 ; box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset; } #home a{ padding-left: 0.5em; position: absolute; padding-top: 0.3em; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <ul> <div id="homecover"> <li id="home"> <a href="#"><span class="fa fa-home"></span></a> <li> </div> </ul> 

Answer 1

您可以使用JavaScript，建议使用jQuery：

$('#home a').on('click', function(e){
    $('#home span').toggleClass('fa-home fa-anchor');
};

我想您知道如何包含jQuery，如果不只是将其粘贴到您的头部：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

让我知道是否可行！

Answer 2

您需要为此添加jQuery：

 $("#home a").click(function(){ $(this).parent().toggleClass("active"); }) 

 ul{ list-style-type: none; margin-top: 0; } li a{ text-decoration: none; color: black; font-size: 25px; } li{ width: 50px; height: 50px; display: inline-block; } #homecover{ width: 55px; height: 55px; margin-top: 150px; left: 47.5%; position: absolute; } #home{ position: absolute; z-index: 2; background-color: #F73933; border-radius: 50%; border: 2px solid #F73933 ; box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset; } #home a{ padding-left: 0.5em; position: absolute; padding-top: 0.3em; } #home.active .fa-home:before{ content: "\\f1b9"; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <ul> <div id="homecover"> <li id="home"> <a href="#"><span class="fa fa-home"></span></a> <li> </div> </ul> 

Answer 3

在切换CSS类之后，必须使用Javascript绑定click事件。

在没有jQuery情况下尝试此解决方案

 let home = document.querySelector('#home'); home.addEventListener('click', (e) => { let icon = document.querySelector('.fa'); icon.classList.toggle('fa-home'); icon.classList.toggle('fa-heart'); }) 

 ul{ list-style-type: none; margin-top: 0; } li a{ text-decoration: none; color: black; font-size: 25px; } li{ width: 50px; height: 50px; display: inline-block; } #homecover{ width: 55px; height: 55px; margin-top: 150px; left: 47.5%; position: absolute; } #home{ position: absolute; z-index: 2; background-color: #F73933; border-radius: 50%; border: 2px solid #F73933 ; box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset; } #home a{ padding-left: 0.5em; position: absolute; padding-top: 0.3em; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <ul> <div id="homecover"> <li id="home"> <a href="#"><span class="fa fa-home"></span></a> <li> </div> </ul> 

Answer 4

当涉及到用户驱动的事件时，您将不得不使用javascript。 一种方法是，有两个类，然后切换它们以显示不同的图标。

 var link = document.querySelector('#home a'); link.addEventListener('click', function(e){ //Prevent default action of a link, which navigates to href prop e.preventDefault(); var icon = this.querySelector('span'); icon.classList.toggle('fa-home'); icon.classList.toggle('fa-image'); }); 

 ul{ list-style-type: none; margin-top: 0; } li a{ text-decoration: none; color: #fff; font-size: 25px; } li{ width: 50px; height: 50px; display: inline-block; } #homecover{ width: 55px; height: 55px; margin-top: 50px; left: 47.5%; position: absolute; } #home{ position: absolute; z-index: 2; background-color: #F73933; border-radius: 50%; border: 2px solid #F73933 ; box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset; } #home a{ padding-left: 0.5em; position: absolute; padding-top: 0.3em; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <ul> <div id="homecover"> <li id="home"> <a href="#"><span class="fa fa-home"></span></a> <li> </div> </ul> 

Answer 5

这是一个非js解决方案

  input + span:before { height:45px; content:"\\f015" } input:checked + span:before { content:"\\f03e" } input{ display:none; } span.icon{ display: block; vertical-align: middle; text-align:center; line-height: 45px; } ul{ list-style-type: none; margin-top: 0; } li a{ text-decoration: none; color: black; font-size: 25px; } li{ width: 50px; height: 50px; display: inline-block; } #homecover{ cursor:pointer; width: 55px; height: 55px; margin-top: 150px; left: 47.5%; position: absolute; } #home{ position: absolute; z-index: 2; background-color: #F73933; border-radius: 50%; border: 2px solid #F73933 ; box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset; } #home a{ padding-left: 0.5em; position: absolute; padding-top: 0.3em; } 

  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <ul> <label class="switch"> <div id="homecover"> <li id="home"> <input type="checkbox" ><span class="icon fa fa-lg"></span> <li> </div> </label> </ul> 

Answer 6

$("span.fa").click(function(){
    if($(this).attr("class") === "fa fa-home"){
          $(this).attr("class", "fa-fa-{any-pic}");
    } else {
          $(this).attr("class", "fa fa-home");
    }
});