title: How to make Bookmark kind of Ribbon on click of side navbar element?
body: <p>I have a side navigation bar in my application which consists of 4 nav items. On initial load, they should look like below - </p>
  
  <p><a href="https://i.stack.imgur.com/nBQP4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nBQP4.png" alt="enter image description here"></a></p>
  
  <p>On click of each item, the background of that item should be changed as below - </p>
  
  <p><a href="https://i.stack.imgur.com/2awvd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2awvd.png" alt="enter image description here"></a></p>
  
  <p>I have tried below code (with limited knowledge on CSS) and was able to get what was shown in first image. For second image It displays like this and it should done as in second image. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;nav class="col-sm-3"&gt;
      &lt;ul class="nav nav-pills nav-stacked"&gt;
        &lt;li&gt;&lt;a href="javascript:void(0);"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="javascript:void(0);"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="javascript:void(0);"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="javascript:void(0);"&gt;Item 4&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.nav-pills&gt;li {
     margin-left: -5px;
  }
  .nav-pills&gt;li {
     width: 90%;
  }
  .nav-pills&gt;li&gt;a{
    color: #0D0D0D;
    background-color: #e1e1e1;
    padding: 15px;
  }
  
  .nav-pills&gt;li&gt;a:focus, .nav-pills&gt;li&gt;a:active{
    /*background-color: white;*/
    border:       30px solid lightgreen;
    border-left:  30px solid transparent;
    border-right: 0;
    width:        100%;
  </code></pre>
  
  <p>}</p>
  
  <p><a href="https://i.stack.imgur.com/GKKer.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GKKer.png" alt="enter image description here"></a></p>