Active link color for jQuery navigation links

I've set up some code using jQuery show/hide that toggles content based on the link that is clicked. The three links that toggle the content are CHART ONE, CHART TWO and CHART THREE. One of the things I'm trying to work out is making the color of the link active while it's content is showing. So each time one of the three links is clicked it changes color. My question is, if possible, how do I do this with my current code. If there's a better way to do this toggle content I'm open to that as well. I've created a fiddle here fiddle

HTML

    <table id="menu" style="margin: 0px; background-color:transparent; border: 0px solid ##000; width: 65%;">
                    <tr>
                    <td style="padding: 1px 2px 1px 0px; font-size:12px;"><a data-chart="chart1" href="##">CHART ONE</a></td>
                  <td style="padding: 1px 8px; 1px 0px; font-size:12px;"><a data-chart="chart2" href="##">CHART TWO</td>
                  <td style="padding: 1px 2px; 1px 0px; font-size:12px;"><a data-chart="chart3" href="##">CHART THREE</td>
                    </tr>   
                    </td>
                    </table>

                    <div id="charts">
    <div id="chart1" class="chart" data-chart="chart1">
        <table class="tbl" style="background-color: ##fff;">

                    <tr>
                        <th>Chart One</th>
                        <th>Header</th>
                        <th>Header</th>
                        <th>Header</th>
                    </tr>
                    <tr style="background-color: ##959595;">
                        <td style="background-color: ##4e4f4f;">Text</td>
                        <td class="x">&nbsp;</td>
                        <td class="x">&nbsp;</td>
                        <td class="x">Text</td>
                    </tr>
                    <tr style="background-color: ##aaa;">
                        <td style="background-color: ##767777;">Text</td>
                        <td class="x">Text</td>
                        <td class="x">Text</td>
                        <td class="x">Text</td>
                    </tr>
                    <tr style="background-color: ##959595;">
                        <td style="background-color: ##4e4f4f;">Text</td>
                        <td class="x">Text</td>
                        <td class="x">Text</td>
                        <td class="x">Text</td>
        </table>
    </div>
    <div id="chart2" class="chart hide" data-chart="chart2">
        <table class="tbl" style="background-color: ##fff;">

                    <tr>
                        <th>Chart Two</th>
                        <th>Header</th>
                        <th>Header</th>
                        <th>Header</th>
                    </tr>
                    <tr style="background-color: ##959595;">
                        <td style="background-color: ##4e4f4f;">Text</td>
                        <td class="x">&nbsp;</td>
                        <td class="x">&nbsp;</td>
                        <td class="x">Text</td>
                    </tr>
                    <tr style="background-color: ##aaa;">
                        <td style="background-color: ##767777;">Text</td>
                        <td class="x">Text</td>
                        <td class="x">Text</td>
                        <td class="x">Text</td>
                    </tr>
                    <tr style="background-color: ##959595;">
                        <td style="background-color: ##4e4f4f;">Text</td>
                        <td class="x">Text</td>
                        <td class="x">Text</td>
                        <td class="x">Text</td>
        </table>
    </div>
    <div id="chart3" class="chart hide" data-chart="chart3">
        <table class="tbl" style="background-color: ##fff;">

                    <tr>
                        <th>Chart Three</th>
                        <th>Header</th>
                        <th>Header</th>
                        <th>Header</th>
                    </tr>
                    <tr style="background-color: ##959595;">
                        <td style="background-color: ##4e4f4f;">Text</td>
                        <td class="x">&nbsp;</td>
                        <td class="x">&nbsp;</td>
                        <td class="x">Text</td>
                    </tr>
                    <tr style="background-color: ##aaa;">
                        <td style="background-color: ##767777;">Text</td>
                        <td class="x">Text</td>
                        <td class="x">Text</td>
                        <td class="x">Text</td>
                    </tr>
                    <tr style="background-color: ##959595;">
                        <td style="background-color: ##4e4f4f;">Text</td>
                        <td class="x">Text</td>
                        <td class="x">Text</td>
                        <td class="x">Text</td>
        </table>
CSS

    ##menu a:link {
    color: #fff;
    border-bottom: none;
    text-decoration: none;
    font-weight: 600;
    padding: 2px 0px;
}

##menu a:visited {
    color: #fff;
    border-bottom: none;
    text-decoration: none;
    font-weight: 600;
    padding: 2px 0px;
}

##menu a:hover {
    color: #fff;
    border-bottom: none;
    text-decoration: none;
    font-weight: 600;
    padding: 2px 0px;
}

##menu a:active {
    color: #000;
    border-bottom: none;
    text-decoration: none;
    font-weight: 600;
    padding: 2px 0px;
} 

Javascript

    $(document).ready(function() {
    $("#menu a").on('click', function(e) {
        e.preventDefault()
        var chart = $(this).data('chart');
        $("#charts .chart:not('.hide')").stop().fadeOut('fast', function() {
            $(this).addClass('hide');
            $('#charts .chart[data-chart="'+chart+'"]').fadeIn('slow').removeClass('hide');
        });
    });
});

Thanks!

Solution

When you click a link, add a class that denotes it's active, and remove the active class from the other links.

$(document).ready(function() {
  var $links = $('#menu a');
  $links.on('click', function(e) {
    $links.not($(this)).removeClass('active');
    $(this).addClass('active');
    e.preventDefault()
    var chart = $(this).data('chart');
    $("#charts .chart:not('.hide')").stop().fadeOut('fast', function() {
      $(this).addClass('hide');
      $('#charts .chart[data-chart="' + chart + '"]').fadeIn('slow').removeClass('hide');
    });
  });
});

##menu a:link {
  color: #fff;
  border-bottom: none;
  text-decoration: none;
  font-weight: 600;
  padding: 2px 0px;
}

##menu a:visited {
  color: #fff;
  border-bottom: none;
  text-decoration: none;
  font-weight: 600;
  padding: 2px 0px;
}

##menu a:hover {
  color: #fff;
  border-bottom: none;
  text-decoration: none;
  font-weight: 600;
  padding: 2px 0px;
}

##menu a:active {
  color: #000;
  border-bottom: none;
  text-decoration: none;
  font-weight: 600;
  padding: 2px 0px;
}

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="menu" style="margin: 0px; background-color:transparent; border: 0px solid ##000; width: 65%;">
  <tr>
    <td style="padding: 1px 2px 1px 0px; font-size:12px;"><a data-chart="chart1" href="##">CHART ONE</a></td>
    <td style="padding: 1px 8px; 1px 0px; font-size:12px;"><a data-chart="chart2" href="##">CHART TWO</td>
    			  <td style="padding: 1px 2px; 1px 0px; font-size:12px;"><a data-chart="chart3" href="##">CHART THREE</td>
    				</tr>	
    				</td>
    				</table>
    				
    				<div id="charts">
    <div id="chart1" class="chart" data-chart="chart1">
        <table class="tbl" style="background-color: ##fff;">
    				
					<tr>
						<th>Chart One</th>
						<th>Header</th>
						<th>Header</th>
						<th>Header</th>
					</tr>
					<tr style="background-color: ##959595;">
						<td style="background-color: ##4e4f4f;">Text</td>
						<td class="x">&nbsp;</td>
						<td class="x">&nbsp;</td>
						<td class="x">Text</td>
					</tr>
					<tr style="background-color: ##aaa;">
						<td style="background-color: ##767777;">Text</td>
						<td class="x">Text</td>
						<td class="x">Text</td>
						<td class="x">Text</td>
					</tr>
					<tr style="background-color: ##959595;">
						<td style="background-color: ##4e4f4f;">Text</td>
						<td class="x">Text</td>
						<td class="x">Text</td>
						<td class="x">Text</td>
        </table>
    </div>
    <div id="chart2" class="chart hide" data-chart="chart2">
        <table class="tbl" style="background-color: ##fff;">
    				
					<tr>
						<th>Chart Two</th>
						<th>Header</th>
						<th>Header</th>
						<th>Header</th>
					</tr>
					<tr style="background-color: ##959595;">
						<td style="background-color: ##4e4f4f;">Text</td>
						<td class="x">&nbsp;</td>
						<td class="x">&nbsp;</td>
						<td class="x">Text</td>
					</tr>
					<tr style="background-color: ##aaa;">
						<td style="background-color: ##767777;">Text</td>
						<td class="x">Text</td>
						<td class="x">Text</td>
						<td class="x">Text</td>
					</tr>
					<tr style="background-color: ##959595;">
						<td style="background-color: ##4e4f4f;">Text</td>
						<td class="x">Text</td>
						<td class="x">Text</td>
						<td class="x">Text</td>
        </table>
    </div>
    <div id="chart3" class="chart hide" data-chart="chart3">
        <table class="tbl" style="background-color: ##fff;">
    				
					<tr>
						<th>Chart Three</th>
						<th>Header</th>
						<th>Header</th>
						<th>Header</th>
					</tr>
					<tr style="background-color: ##959595;">
						<td style="background-color: ##4e4f4f;">Text</td>
						<td class="x">&nbsp;</td>
						<td class="x">&nbsp;</td>
						<td class="x">Text</td>
					</tr>
					<tr style="background-color: ##aaa;">
						<td style="background-color: ##767777;">Text</td>
						<td class="x">Text</td>
						<td class="x">Text</td>
						<td class="x">Text</td>
					</tr>
					<tr style="background-color: ##959595;">
						<td style="background-color: ##4e4f4f;">Text</td>
						<td class="x">Text</td>
						<td class="x">Text</td>
						<td class="x">Text</td>
        </table>