怎么在同一个页面内点击左边的链接，右边同一位置显示链接相关的内容

如下图

在百度上找到一段代码，只是怎么让右边显示图文等内内容呢
<script>
var content = new Array(); //定义一个数组来预先保存内容
content[1] = "内容1";
content[2] = "内容2";
content[3] = "内容3";
content[4] = "内容4";
content[5] = "内容5";
content[6] = "内容6";
content[7] = "内容7";
content[8] = "内容8";
content[9] = "内容9";
</script>
<table width="100%" border="0">
<tr>
<td width="18%" bgcolor="#669900"><a href="#" onclick="div1.innerHTML=content[1]" >1</a></td>
<td width="84%" rowspan="9"><div id="div1" style="width:100%;height:100%">显示的层</div></td>
</tr>
<tr>
<td bgcolor="#669900"><a href="#" onclick="div1.innerHTML=content[2]" >2</a></td>
</tr>
<tr>
<td bgcolor="#669900"><a href="#" onclick="div1.innerHTML=content[3]" >3</a></td>
</tr>
<tr>
<td bgcolor="#669900"><a href="#" onclick="div1.innerHTML=content[4]" >4</a></td>
</tr>
<tr>
<td bgcolor="#669900"><a href="#" onclick="div1.innerHTML=content[5]" >5</a></td>
</tr>
<tr>
<td bgcolor="#669900"><a href="#" onclick="div1.innerHTML=content[6]" >6</a></td>
</tr>
<tr>
<td bgcolor="#669900"><a href="#" onclick="div1.innerHTML=content[7]" >7</a></td>
</tr>
<tr>
<td bgcolor="#669900"><a href="#" onclick="div1.innerHTML=content[8]" >8</a></td>
</tr>
<tr>
<td bgcolor="#669900"><a href="#" onclick="div1.innerHTML=content[9]" >9</a></td>
</tr>
</table>