'Tabs background and font color change when click

I have a tabbed pane in my HTML page. The following changes has to done in the task.

  1. When select a tab or hover, background - white, text color - #6baed9, border - 1px same color as text.

  2. When tab is unselected (if selected the another tab this become unselected one) - background - #6baed9, text color - white, border - 1px same color as text.

My CSS are as following,

#my_settings ul.tab li a {
    display: inline-block;
    text-align: center;
    padding: 8px 12px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
    height:35px;
    width:250px;
    color: #6baed9;
}

#my_settings ul.tab li a:hover {
    background-color: #fff;
    color: #6baed9;
    border: 1px solid #6baed9
}

#my_settings ul.tab li a:focus, .active {
    background-color: #fff;
    color: #6baed9;
    border: 1px solid #6baed9
}

Issues I have :

  1. In this when is case 2 above, I cant get the white text color when tab is not selected.

  2. The border of the selected tab is fine but the bottom line is not showing.Why is that.

Please help me to do this.

PS : When I try to change #my_settings ul.tab li a { to color : #fff, works fine. But when I click somewhere in the page the selected tab's color(#6baed9) trun to white.

htmlcss


Solution 1:[1]

$(".tab").click(function() {
  $(".tab").removeClass('selected')
  $(this).addClass('selected')
})
$(".tab").hover(function() {
  $(".tab").removeClass('selected')
  $(this).addClass('selected')
})
.tab {
  width: 60px;
  height: 60px;
  background: #3be9a6;
  margin: 20px;
  display: inline-block;
  float: left
}
.selected {
  background: #3b6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
<div class="tab">4</div>
<div class="tab">5</div>
<div class="tab">6</div>
<div class="tab">7</div>

you can use set up like snippet above.use jquery to insert class wich has the property that you want to have changed on hover or click.

Solution 2:[2]

Are you setting the <li class="active"> for the active tab?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 parth jansari
Solution 2 Frazer Kirkman

Related Questions