jquery - jQuery 导航链接的事件链接颜色

Question

我已经使用 jQuery show/hide 设置了一些代码，这些代码根据单击的链接切换内容。切换内容的三个链接是图表一、图表二和图表三。我正在尝试解决的其中一件事是在显示内容时使链接的颜色处于事件状态。因此，每次单击三个链接中的一个时，它都会改变颜色。我的问题是，如果可能的话，我该如何使用我当前的代码来做到这一点。如果有更好的方法来执行此切换内容，我也愿意接受。我在这里创建了一个 fiddle 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');
        });
    });
});

谢谢!

Answer 1

当您单击链接时，添加一个表示它处于事件状态的类，并从其他链接中删除事件类。

$(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>