javascript - 切换两个箭头的颜色变化

Question

我希望一个箭头的颜色在单击时更改，并保持更改状态直到单击另一个箭头。

  <span class="glyphicon glyphicon-triangle-top col-md-12" aria-hidden="true"></span>

<span class="glyphicon glyphicon-triangle-bottom col-md-12" aria-hidden="true"></span>

您对我应该如何做有什么建议吗？

Answer 1

您将需要使用 javascript 来获得您想要的操作。我建议你使用 jquery如果您不熟悉 JavaScript，请使用 JavaScript 库。这是一个代码示例。

$(document).ready(function(){

    $('span').click(function(){
         // Set all spans to default
        $('span').css('background-color', '#333');
         // Set clicked to green
        $(this).css('background-color', '#10fd01');
    });

});

span{
  display: inline-block;
  padding: 20px 30px;
  color: #fff;
  border: 3px solid #000;
  background: #333
}

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