Aktive Linkfarbe für jQuery-Navigationslinks

Ich habe einen Code mit jQuery show/hide eingerichtet, der den Inhalt basierend auf dem angeklickten Link umschaltet. Die drei Links, die den Inhalt umschalten, sind CHART ONE, CHART TWO und CHART THREE. Eines der Dinge, die ich versuche herauszufinden, besteht darin, die Farbe des Links aktiv zu machen, während der Inhalt angezeigt wird. Jedes Mal, wenn einer der drei Links angeklickt wird, ändert sich die Farbe. Meine Frage ist, wenn möglich, wie mache ich das mit meinem aktuellen Code. Wenn es eine bessere Möglichkeit gibt, diesen Inhalt umzuschalten, bin ich auch dafür offen. Ich habe eine Geige hier fiddle erstelltAktive Linkfarbe für jQuery-Navigationslinks

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'); 
     }); 
    }); 
});

Dank!

Quelle

2017-06-09 Anonymous

Wenn Sie auf einen Link klicken, fügen Sie eine Klasse hinzu, die angibt, dass sie aktiv ist, und entfernen Sie die aktive Klasse von den anderen 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> 
 
    \t \t \t <td style="padding: 1px 2px; 1px 0px; font-size:12px;"><a data-chart="chart3" href="##">CHART THREE</td> 
 
    \t \t \t \t </tr> \t 
 
    \t \t \t \t </td> 
 
    \t \t \t \t </table> 
 
    \t \t \t \t 
 
    \t \t \t \t <div id="charts"> 
 
    <div id="chart1" class="chart" data-chart="chart1"> 
 
     <table class="tbl" style="background-color: ##fff;"> 
 
    \t \t \t \t 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <th>Chart One</th> 
 
\t \t \t \t \t \t <th>Header</th> 
 
\t \t \t \t \t \t <th>Header</th> 
 
\t \t \t \t \t \t <th>Header</th> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color: ##959595;"> 
 
\t \t \t \t \t \t <td style="background-color: ##4e4f4f;">Text</td> 
 
\t \t \t \t \t \t <td class="x">&nbsp;</td> 
 
\t \t \t \t \t \t <td class="x">&nbsp;</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color: ##aaa;"> 
 
\t \t \t \t \t \t <td style="background-color: ##767777;">Text</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color: ##959595;"> 
 
\t \t \t \t \t \t <td style="background-color: ##4e4f4f;">Text</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
     </table> 
 
    </div> 
 
    <div id="chart2" class="chart hide" data-chart="chart2"> 
 
     <table class="tbl" style="background-color: ##fff;"> 
 
    \t \t \t \t 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <th>Chart Two</th> 
 
\t \t \t \t \t \t <th>Header</th> 
 
\t \t \t \t \t \t <th>Header</th> 
 
\t \t \t \t \t \t <th>Header</th> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color: ##959595;"> 
 
\t \t \t \t \t \t <td style="background-color: ##4e4f4f;">Text</td> 
 
\t \t \t \t \t \t <td class="x">&nbsp;</td> 
 
\t \t \t \t \t \t <td class="x">&nbsp;</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color: ##aaa;"> 
 
\t \t \t \t \t \t <td style="background-color: ##767777;">Text</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color: ##959595;"> 
 
\t \t \t \t \t \t <td style="background-color: ##4e4f4f;">Text</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
     </table> 
 
    </div> 
 
    <div id="chart3" class="chart hide" data-chart="chart3"> 
 
     <table class="tbl" style="background-color: ##fff;"> 
 
    \t \t \t \t 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <th>Chart Three</th> 
 
\t \t \t \t \t \t <th>Header</th> 
 
\t \t \t \t \t \t <th>Header</th> 
 
\t \t \t \t \t \t <th>Header</th> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color: ##959595;"> 
 
\t \t \t \t \t \t <td style="background-color: ##4e4f4f;">Text</td> 
 
\t \t \t \t \t \t <td class="x">&nbsp;</td> 
 
\t \t \t \t \t \t <td class="x">&nbsp;</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color: ##aaa;"> 
 
\t \t \t \t \t \t <td style="background-color: ##767777;">Text</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color: ##959595;"> 
 
\t \t \t \t \t \t <td style="background-color: ##4e4f4f;">Text</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
\t \t \t \t \t \t <td class="x">Text</td> 
 
     </table>

Quelle

2017-06-09 18:45:49

Um Ihre CSS eine Klasse hinzufügen, die die Farbe

#menu .active { 
    color: #ff0000; 
}

Dann, um Ihre JavaScript-Methode hinzufügen

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

Was die Javascript wird eingestellt does ist das Hinzufügen und Entfernen der CSS-Stil mit der Farbe tha t Sie für Ihren Link wollen, während es ist das einzige ausgewählte

Quelle

2017-06-09 18:53:06

codepen

Warum gehst du nicht einfach Bootstrap-Tabs verwenden?

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

Quelle

2017-06-09 18:59:04

Hallo Zachariah, habe ich versucht, Ihre Bootstrap-Vorschlag und leider in den Bootstratp Stilen und Javascript störten mit einem anderen Stil und Script-Code ziehen wir verwenden. Es sieht nach einer tollen Idee aus und würde es gerne benutzen. Ich werde nebenbei weiter damit experimentieren. Vielen Dank! –

Aktive Linkfarbe für jQuery-Navigationslinks

Antwort

Verwandte Themen