境界に左の行を追加するためのSCSS

Question

私はボタンが非選択の状態では単純なデコレーションされていないリンクのように見えるようにしようとしています。

ユーザーが「アクティブ」というクラスを適用したいときにクリックします。

アクティブ状態では、ボタンの左の枠線が青色になります。ここで

は、私は私のSCSSを持っている方法ですが、それは働いていない：

.case-nav-link { 
    display: block; 
    min-width: 200px; 
    font-size:16px; 
    border:1px solid gray; 
    margin:10px; 
    padding:15px 10px; 
    border-left:solid 6px transparent; 
    &.active { 
    border-left:solid 6px blue; 
    } 
} 

Answer 1

あなたはクラスがクリックで追加したい場合は、場合<button type="button">または<span>を使用し、この目的のために<a>を使用しないでくださいコードの読み込み時に追加します。 ：このfiddle

<a href="#0" class="case-nav-link active">something</a> 

.case-nav-link { 
    display: block; 
    min-width: 200px; 
    font-size: 16px; 
    border: 1px solid gray; 
    margin: 10px; 
    padding: 15px 10px; 
    border-left: 6px solid transparent; 
    box-sizing: border-box; 
    &.active { 
    border-left: 6px solid red; 
    } 
} 

Answer 2

をチェック私はあなたのマークアップは、[作業罰金]（httpsに思えるあなたは

$(document).ready(function() { 
 
    $('.case-nav-link').on("click", function(e) { 
 
    e.preventDefault(); 
 
    $(this).addClass('active'); 
 
    
 
    }) 
 

 
})

.case-nav-link { 
 
    display: block; 
 
    min-width: 200px; 
 
    font-size:16px; 
 
    border:1px solid gray; 
 
    margin:10px; 
 
    padding:15px 10px; 
 
    border-left:solid 6px transparent; 
 
    
 
} 
 

 
.active { 
 
    border-left:solid 6px blue; 
 
} 
 
    
 
    
 
    /* added for testing */ 
 
    
 
    .container {width:500px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<a class="case-nav-link" >Link</a> 
 
</div>