0
クリックしたリンクに基づいてコンテンツを切り替えるjQueryの表示/非表示を使用してコードを設定しました。コンテンツを切り替える3つのリンクは、1つのチャプター、2つのチャプター、3つのチャプターです。私が解決しようとしていることの1つは、コンテンツが表示されている間、リンクの色をアクティブにすることです。 3つのリンクの1つがクリックされるたびに、色が変わります。可能であれば、どうすれば私の現在のコードでこれを行うのですか？このトグル・コンテンツを行うためのより良い方法があれば、私はそれにもオープンしています。 私はここfiddlejQueryのナビゲーションリンクのアクティブリンクの色
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"> </td>
<td class="x"> </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"> </td>
<td class="x"> </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"> </td>
<td class="x"> </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');
});
});
});
おかげでフィドルを作成しました！
こんにちはザカリヤ、私はあなたのブートストラップの提案を試してみましたが、残念ながら私たちが使用している他のいくつかのスタイルとスクリプトコードを妨害BootstratpスタイルとJavaScriptで引っ張っ。それは素晴らしいアイデアのように見え、それを使うのが好きです。私は横にそれを実験し続けるつもりです。ありがとう！ –