Condensing javascript
<p>I'm not much of a Javascript programmer at all, but I have figured out a way to create a tabbed area (ie, clicking a tab shows a different DIVs content), but my code seems awfully bulky. Was wondering if anyone could enlighten me on how to condense it somewhat.</p>

<p>Here's the HTML:</p>

<pre><code>&lt;aside id="sb-popular"&gt;
  &lt;p class="sb-popular-nav"&gt;
    &lt;a id="sbpt1" class="current" href="javascript:showdiv('sbp-latest'); hidediv('sbp-commented'); hidediv('sbp-popular'); hidediv('sbp-views'); tabset('sbpt1'); taboff('sbpt2'); taboff('sbpt3'); taboff('sbpt4');"&gt;Latest&lt;/a&gt;
    &lt;a id="sbpt2" href="javascript:showdiv('sbp-commented'); hidediv('sbp-latest'); hidediv('sbp-popular'); hidediv('sbp-views'); tabset('sbpt2'); taboff('sbpt1'); taboff('sbpt3'); taboff('sbpt4');"&gt;Commented&lt;/a&gt;
    &lt;a id="sbpt3" href="javascript:showdiv('sbp-popular'); hidediv('sbp-commented'); hidediv('sbp-latest'); hidediv('sbp-views'); tabset('sbpt3'); taboff('sbpt1'); taboff('sbpt2'); taboff('sbpt4');"&gt;Popular&lt;/a&gt;
    &lt;a id="sbpt4" href="javascript:showdiv('sbp-views'); hidediv('sbp-commented'); hidediv('sbp-popular'); hidediv('sbp-latest'); tabset('sbpt4'); taboff('sbpt2'); taboff('sbpt3'); taboff('sbpt1');"&gt;Views&lt;/a&gt;
  &lt;/p&gt;
  &lt;div id="sbp-latest"&gt;
    Content here
  &lt;/div&gt;
  &lt;div id="sbp-commented"&gt;
    Content here
  &lt;/div&gt;
  &lt;div id="sbp-popular"&gt;
    Content here
  &lt;/div&gt;
  &lt;div id="sbp-views"&gt;
    Content here
  &lt;/div&gt;
&lt;/aside&gt;
</code></pre>

<p>As you can see the javascript there is a bit unwieldy. Here's my JS.</p>

<pre><code>function hidediv(d) { document.getElementById(d).style.display = "none"; }
function showdiv(d) { document.getElementById(d).style.display = "block"; }
function tabset(d) { document.getElementById(d).style.color = "white";}
function taboff(d) { document.getElementById(d).style.color = "black";}
</code></pre>
