Bootstrap 3导航丸，活动类仅在单击分配的元素后才起作用

Question

I have following code for nav-pills component:

  <ul id="steps" class="nav nav-pills form-steps">
    <li class="active"><a data-toggle="pill" href="#options"></a></li>
    <li><a data-toggle="pill" href="#payments"></a></li>
  </ul>

And this is my tab-content just to make sure that href and id are equal:

  <div class="tab-content">
    <div class="tab-pane fade in active" id="options">
      <%= render 'options' %>
    </div>
    <div class="tab-pane fade" id="payments">
      <%= render 'payments' %>
    </div>
  </div>

This is how the look of active a is made (basically it's just a circle filled with special color):

.form-steps > li.active > a {
    background-color: #931f2a;
}

And here's code for a regular a :

.form-steps > li > a {
    border: 2px solid #931f2at;
    height: 30px;
    width: 30px;
    border-radius: 100%;
}

I suppose that by adding .active class to corresponding li element makes a element filled with color, but it doesn't when I open modal where this component is placed for the fist time, to activate this color I must click on the link, right after that my element is filled. When I open modal for the second time after I click on another link, I see correct behavior, ie .active class is filled with color. It's an SPA and I have another nav-pills like this with exact markup and it works just fine and I don't quite understand why this behavior doesn't work on second nav-pills . I double checked that class names and ids don't repeat each others and I am sure that no custom js was involved into this. Can you please give me a direction to inspect what I did wrong? Thanks in advance!

Answer 1

尝试添加以下CSS：

.form-steps > li.active > a:focus { background-color: #931f2a; }

.form-steps > li.active > a:active { background-color: #931f2a; }

.form-steps > li.active > a:visited { background-color: #931f2a; }