jQuery导航链接的活动链接颜色

时间：2017-06-09 18:36:49

标签： jquery html css slidetoggle

我使用jQuery show / hide设置了一些代码，根据点击的链接切换内容。切换内容的三个链接是CHART ONE，CHART TWO和CHART THREE。我正在努力解决的一件事就是在内容显示时激活链接的颜色。所以每次点击三个链接中的一个时，它就会改变颜色。我的问题是，如果可能的话，我如何使用我当前的代码执行此操作。如果有更好的方法来切换内容，我也会对此持开放态度。 我在这里创造了一个小提琴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');
        });
    });
});

谢谢！

3 个答案:

答案 0 :(得分：0)

点击链接后，添加一个表示其处于活动状态的类，然后从其他链接中删除活动类。

＆＃13;
＆＃13; 
TableRow
＆＃13; 
Table
＆＃13; 
$(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');
    });
  });
});
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

给你的css添加一个用于设置颜色的类

#menu .active {
  color: #ff0000;
}

然后，到你的javascript方法添加

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

javascript的作用是添加和删除包含所需链接颜色的css样式，而选择的是

答案 2 :(得分：0)

codepen

  

为什么不直接使用引导标签？

    <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>
相关问题
最新问题