link changes classes and shows div/span
hello, i want to make a page with 2 areas. on one side there are some links, on the other, there is some content. i want to change the link color (css class) and in the same time to make something show up.
actually i have now this:
- $(function() {
$( '.nav span' ).on( 'click', function() {
var showc= $(this).attr('rel');
$( this ).parent().find( 'span.active' ).removeClass( 'active' );
$( this ).addClass( 'active' );
$('.content span').hide();
$('#' + showc).show();
});
});
and the html:
-
<div class="nav">
<span rel="1"><a href="#">Link 1</a></span>
<span rel="2"><a href="#">Link 1</a></span>
<span rel="3"><a href="#">Link 1</a></span>
</div>
<div class="content">
<span id="1"><table width="200" border="1">
<tbody>
<tr>
<td>aaaa</td>
<td>hhhh</td>
</tr>
<tr>
<td>hhhh</td>
<td>tttt</td>
</tr>
</tbody>
</table></span>
<span id="2" ><table width="200" border="1">
<tbody>
<tr>
<td>bbbb</td>
<td>hhhh</td>
</tr>
<tr>
<td>hhhh</td>
<td>tttt</td>
</tr>
</tbody>
</table></span>
<span id="3" >3</span>
</div>
css:
- .nav a { cursor: pointer; }
.active { color:#f00;font-weight:bolder; }
.content span {display:none;}
http://jsfiddle.net/9ff79/54/
i just want to know if this is ok, or if i can optimize something?
thanks