[jQuery] toggleClass() help - assigning double class names that look like this: "classname classname"

[jQuery] toggleClass() help - assigning double class names that look like this: "classname classname"

<html><head></head><body>
<span class="postbody">The problem with the code below is that it modifies the tag to look like this:
</span>
<table class="code" align="center" cellpadding="3" cellspacing="1" width="90%">
<tbody><tr>
<td class="row1"><span class="genmed"><b>Code:</b></span></td>
</tr>
<tr>
<td class="row2"><span class="postbody"><font color="#006600"><a class="video video.active"/></font></span></td>
</tr>
</tbody></table>
<span class="postbody">
When it needs to look like this:
</span>
<table class="code" align="center" cellpadding="3" cellspacing="1" width="90%">
<tbody><tr>
<td class="row1"><span class="genmed"><b>Code:</b></span></td>
</tr>
<tr>
<td class="row2"><span class="postbody"><font color="#006600"><a class="video active"/></font></span></td>
</tr>
</tbody></table>
<span class="postbody">
Here is the code that I'm using:
</span>
<table class="code" align="center" cellpadding="3" cellspacing="1" width="90%">
<tbody><tr>
<td class="row1"><span class="genmed"><b>Code:</b></span></td>
</tr>
<tr>
<td class="row2"><span class="postbody"><font color="#006600">function swapMode(mediaType) {
$(".music.active").toggleClass("music");
$(".video.active").toggleClass("video");
$(".radio.active").toggleClass("radio");
if (mediaType == "1")
$(".video").toggleClass(".video.active");
else if (mediaType == "2")
$(".music").toggleClass(".music.active");
else if (mediaType == "3")
$(".radio").toggleClass(".radio.active");
} </font></span></td>
</tr>
</tbody></table>
<span class="postbody">
Thanks for your help</span>
</body></html>