link changes classes and shows div/span

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:

  1. $(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:


  1. <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:

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