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来获取所需的操作。如果您不熟悉javascript，我建议您使用jquery JavaScript库。这是一个代码示例。

＆＃13;

$(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');
    });

});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只是“magreenberg”帖子的修改版本。我认为下面是解决这个问题的更好方法。

$('.glyphicon.glyphicon-triangle-top.col-md-12').click(function(){
        $('.glyphicon.glyphicon-triangle-top.col-md-12').css('color', '#333');
		$('.glyphicon.glyphicon-triangle-bottom.col-md-12').css('color', '#333');
        $(this).css('color', '#10fd01');
    });
	$('.glyphicon.glyphicon-triangle-bottom.col-md-12').click(function(){
        $('.glyphicon.glyphicon-triangle-top.col-md-12').css('color', '#333');
		$('.glyphicon.glyphicon-triangle-bottom.col-md-12').css('color', '#333');
         // Set clicked to green
        $(this).css('color', '#10fd01');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

 <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>

切换两个箭头

2 个答案: