单击时更改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

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

不使用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");
    }
});