I have navigation bar with few items. Each tab has class active assigned if it's currently selected. If that has class active I would like to set background color to that tab. Here is example:

```css
div.admin-box {
 background-color: #E0E0E0;
}

.active a {
  background-color: #E0E0E0 !important;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#tab-1">Tab 1</a></li>
    <li><a data-toggle="tab" href="#tab-2">Tab 2</a></li>
    <li><a data-toggle="tab" href="#tab-3">Tab 3</a></li>
    <li><a data-toggle="tab" href="#tab-4">Tab 4</a></li>
</ul>
<div class="tab-content">
    <!-- Tab 1 -->
    <div id="tab-1" class="tab-pane fade in active admin-box">
      Tab 1 content.
    </div>
    <!-- Tab 2 -->
    <div id="tab-2" class="tab-pane fade admin-box">
      Tab 2 content
    </div>
    <!-- Tab 3 -->
    <div id="tab-3" class="tab-pane fade admin-box">
      Tab 3 content.
    </div>
    <!-- Tab 4 -->
    <div id="tab-4" class="tab-pane fade admin-box">
      Tab 4 content.
    </div>
</div>
```

As you can see each tab container has background color. So selected tab should have the same background color to match containers background. Is there a way to achieve that with pure CSS or JS has to be involved as well? If anyone knows easy way to do this please let me know.