CODEWITHSUNDEEP
jqueryhtmlcss
Learning
Learning

Reputation: 20001

Change Color of active tab font to black

I have simple table which sliding line under each tab.

Default color of font is #aaaaaa and for active tab i want font color to be black.

http://codepen.io/anon/pen/qbNqYx

  <ul>
    <li class="one"><a href="#">ONE</a></li><!--
 --><li class="two"><a href="#">TWO</a></li><!--
 --><li class="three"><a href="#">THREE</a></li><!--
 --><li class="four"><a href="#">FOUR</a></li>
    <hr />
  </ul>

Upvotes: 3

Views: 1083

Answers (4)

Manivannan
Manivannan

Reputation: 3254

Add class active to default tab and move to active tab. Refer below code pend sample code on this scenario.

codepen.io/anon/pen/rxLWQw

Upvotes: 0

Jyoti Sharma
Jyoti Sharma

Reputation: 994

Hello Please add following JS:

$('.tab-nav-wrapper ul li a').click(function(){  
   $('.tab-content-wrapper > div').hide();
   $('.tab-content-wrapper > div').eq($(this).parent().index()).show(); 
   $(".tab-nav-wrapper ul li a").css('color','#aaaaaa');
   $(this).css('color','black');
});

Upvotes: 7

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can add a class eg current when you activate the tab.

eg:

.current{
  color: #000000;
}

You can toggle the class on element selection:

$('.tab-nav-wrapper ul li a').click(function(){  
  $('.tab-nav-wrapper ul li a').removeClass('current');
  $(this).addClass('current');
  $('.tab-content-wrapper > div').hide();
 $('.tab-content-wrapper > div').eq($(this).parent().index()).show();  
});

Demo: http://codepen.io/anon/pen/vLKyzQ

Upvotes: 3

Jai
Jai

Reputation: 74738

You have to create an .active{color:#000;} class in the css and use this script to add/remove the active class: 

.active{ color:#000; }

js: 

$('.tab-nav-wrapper ul li a').click(function(){ 
  $('.active').removeClass('active'); // <----remove the active class
  $(this).addClass('active'); // <----add the active class to clicked one.
  $('.tab-content-wrapper > div').hide();
 $('.tab-content-wrapper > div').eq($(this).parent().index()).show();  
});

Updated codepen.

Upvotes: 4

Related Questions