Sagar Kodte Sagar Kodte - 5 months ago 11
CSS Question

border-top color have to same color as active tab background color when tab is click

I want to keep border-top of

current tab-content
as
active tab background color
. I Wrote below css for it but it's not applying.

.tab-content.current{
display: inherit;
border-top: 5px solid #3399CC;
}


if i put
!important
to
border-top
then the hover effect of border-top is not applying. For this hover effect i wrote script for it. Please help is there any other way to do it. Thanks. Hope you got my question. If not let me know.



$(document).ready(function() {

$('ul.tabs li').click(function() {
var tab_id = $(this).attr('data-tab');

$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');

$(this).addClass('current');
$("#" + tab_id).addClass('current');
})

$(document).ready(function() {
$('.tab1').hover(function() {
$('.tab-content').css({
"border-top": "5px solid #FF0000"
});
});
$('.tab2').hover(function() {
$('.tab-content').css({
"border-top": "5px solid #88DD00"
});
});
$('.tab3').hover(function() {
$('.tab-content').css({
"border-top": "5px solid #673ab7"
});
});
$('.tab4').hover(function() {
$('.tab-content').css({
"border-top": "5px solid #336699"
});
});
});

})

body {
margin-top: 100px;
font-family: 'Trebuchet MS', serif;
line-height: 1.6
}
.container {
width: 800px;
margin: 0 auto;
}
ul.tabs {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li {
background: #EFEFEF;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-radius: 5px 5px 0px 0px;
}
.tab1:hover {
background: #FF0000;
color: #fff;
border: none;
}
.tab2:hover {
background: #88DD00;
color: #fff;
border: none;
}
.tab3:hover {
background: #673ab7;
color: #fff;
border: none;
}
.tab4:hover {
background: #336699;
color: #fff;
border: none;
}
ul.tabs li.current {
background: #3399CC;
color: #fff;
border: none;
}
.tab-content {
display: none;
background: #ededed;
padding: 15px;
}
.tab-content.current {
display: inherit;
border-top: 5px solid #3399CC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

<ul class="tabs">
<li class="tab-link current tab1" data-tab="tab-1">Tab One</li>
<li class="tab-link tab2" data-tab="tab-2">Tab Two</li>
<li class="tab-link tab3" data-tab="tab-3">Tab Three</li>
<li class="tab-link tab4" data-tab="tab-4">Tab Four</li>
</ul>

<div id="tab-1" class="tab-content current">
Lorem ipsufgdgt dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="tab-2" class="tab-content">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullggdt mollit anim id est laborum.
</div>
<div id="tab-3" class="tab-content">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irurgdgdglit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div id="tab-4" class="tab-content">
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamdfdrgdgercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

</div>
<!-- container -->




Answer

Try this:

$(document).ready(function() {

  $('ul.tabs li').click(function() {
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  })

  $(document).ready(function() {
    $('.tab1').hover(function() {
 if($(this).hasClass('current')){
$('.tab-content').css({
        "border-top": "5px solid #3399cc"
      });
}else{
$('.tab-content').css({
        "border-top": "5px solid #FF0000"
      });}
     
    });
    $('.tab2').hover(function() {          
      if($(this).hasClass('current')){
        $('.tab-content').css({
        "border-top": "5px solid #3399cc"
      });
     }else{
      $('.tab-content').css({
        "border-top": "5px solid #88DD00"
      });
      }
    });
    $('.tab3').hover(function() {
      if($(this).hasClass('current')){
        $('.tab-content').css({
        "border-top": "5px solid #3399cc"
      });
     }else{
      $('.tab-content').css({
        "border-top": "5px solid #673ab7"
      });
      }          
    });
    $('.tab4').hover(function() {
      if($(this).hasClass('current')){
        $('.tab-content').css({
        "border-top": "5px solid #3399cc"
      });
     }else{
      $('.tab-content').css({
        "border-top": "5px solid #336699"
      });
      }
     
    });
  });

})
body {
  margin-top: 100px;
  font-family: 'Trebuchet MS', serif;
  line-height: 1.6
}
.container {
  width: 800px;
  margin: 0 auto;
}
ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
ul.tabs li {
  background: #EFEFEF;
  color: #222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-radius: 5px 5px 0px 0px;
}
.tab1:hover {
  background: #FF0000;
  color: #fff;
  border: none;
}
.tab2:hover {
  background: #88DD00;
  color: #fff;
  border: none;
}
.tab3:hover {
  background: #673ab7;
  color: #fff;
  border: none;
}
.tab4:hover {
  background: #336699;
  color: #fff;
  border: none;
}
ul.tabs li.current {
  background: #3399CC;
  color: #fff;
  border: none;
}
.tab-content {
  display: none;
  background: #ededed;
  padding: 15px;
}
.tab-content.current {
  display: inherit;
  border-top: 5px solid #3399CC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <ul class="tabs">
    <li class="tab-link current tab1" data-tab="tab-1">Tab One</li>
    <li class="tab-link tab2" data-tab="tab-2">Tab Two</li>
    <li class="tab-link tab3" data-tab="tab-3">Tab Three</li>
    <li class="tab-link tab4" data-tab="tab-4">Tab Four</li>
  </ul>

  <div id="tab-1" class="tab-content current">
    Lorem ipsufgdgt dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div id="tab-2" class="tab-content">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullggdt mollit anim id est laborum.
  </div>
  <div id="tab-3" class="tab-content">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irurgdgdglit esse cillum dolore eu fugiat nulla pariatur.
  </div>
  <div id="tab-4" class="tab-content">
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamdfdrgdgercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>

</div>
<!-- container -->

Comments