jQuery 导航 link 的活动 link 颜色

Question

我使用 jQuery show/hide 设置了一些代码，这些代码根据单击的 link 切换内容。切换内容的三个 link 是图表一、图表二和图表三。我正在努力解决的问题之一是在 link 内容显示时激活它的颜色。因此，每次单击三个 link 之一时，它都会改变颜色。我的问题是，如果可能的话，我该如何使用我当前的代码来做到这一点。如果有更好的方法来执行此切换内容，我也愿意接受。我在这里创建了一个 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

当您单击 link 时，添加一个表示它处于活动状态的 class，并从其他 link 中删除活动的 class。

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

Answer 2

在您的css中添加一个class用于设置颜色

#menu .active {
  color: #ff0000;
}

然后，在您的 javascript 方法中添加

$("#menu .active").removeClass("active");
$(this).addClass("active");

javascript 所做的是添加和删除 css 样式，其中包含您想要的 link 颜色，而它是选定的

Answer 3

codepen

Why don't you just use bootstrap tabs?

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <div class="container">
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#chart1">chart 1</a></li>
    <li><a data-toggle="tab" href="#chart2">chart 2</a></li>
    <li><a data-toggle="tab" href="#chart3">chart 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h1>HOME</h1>
    </div>
    <div id="chart1" class="tab-pane fade">
      <h1>chart 1</h1>

    </div>
    <div id="chart2" class="tab-pane fade">
      <h1>chart 2</h1>

    </div>
    <div id="chart3" class="tab-pane fade">
      <h1>chart 3</h1>

    </div>
  </div>
</div>

jQuery 导航 link 的活动 link 颜色

Active link color for jQuery navigation links

html

css

jquery

slidetoggle