兩個箭頭的切換顏色變化

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庫。這是一個代碼示例。

$(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>

Answer 2

剛剛修改的 「magreenberg」 後的版本。我認爲下面是解決這個問題的更好方法。

$('.glyphicon.glyphicon-triangle-top.col-md-12').click(function(){ 
 
     $('.glyphicon.glyphicon-triangle-top.col-md-12').css('color', '#333'); 
 
\t \t $('.glyphicon.glyphicon-triangle-bottom.col-md-12').css('color', '#333'); 
 
     $(this).css('color', '#10fd01'); 
 
    }); 
 
\t $('.glyphicon.glyphicon-triangle-bottom.col-md-12').click(function(){ 
 
     $('.glyphicon.glyphicon-triangle-top.col-md-12').css('color', '#333'); 
 
\t \t $('.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>