I'm struggling with customizing the colors of each of the 4 buttons that link to different tables using CSS. I want to assign a specific color to each button, like red for the first one and blue for the second.
Your assistance in this matter would be greatly appreciated. Thank you!
Link to demo: http://jsfiddle.net/LpLhP/8/
HTML:
<a class="button" data-table="1" href="#">Slifer Level</a>
<a class="button" data-table="2" href="#">Ra Level</a>
<a class="button" data-table="3" href="#">Obelisk Level</a>
<a class="button" data-table="4" href="#">Exodia Level</a>
<table id="1">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
...
</tbody>
</table>
...
CSS:
body{
font-family: sans-serif;
font-size: 16px;
line-height: 1.5em;
text-align: center;
margin-top: 1.5rem;
}
a.button {
background-color: #ed8c15;
color: white;
padding: 0.5rem;
border-radius: 5px;
text-decoration: none;
// Add hover effect here
}
...
JavaScript:
(function () {
var tables = $("table");
tables.hide().first().show();
$("a.button").on("click", function () {
tables.hide();
var tableTarget = $(this).data("table");
$("table#" + tableTarget).show();
})
})();