مشکل در ساختن تب منو با جاوا اسکریپت

[---ali---]

با سلام
من میخواهم یک فرم به این شکل بسازم :


128742

منوها با استفاده از کدهای UL و LI ساخته شده به این صورت :


<div class="header" ></div>

<div class="content">
<div class="content-tab">
<div class="tab">
<ul>
<li id="tab-1" class="tab-on" onclick="tab(1)">منو جدید</li>
<li id="tab-2" class="tab-off" onclick="tab(2)">مدیریت منو</li>
</ul>
</div></div>

<div class="show"></div>

<div class="message" id="message-error" >
<img src="images/4.gif" style="margin-top:3px; margin-right:4px; float:right;" />
<p>شما باید نام منو را بنویسید</p>
</div>

<div class="message" id="message">
<img src="images/8.gif" style="margin-top:3px; margin-right:4px; float:right;" />
<p> منو با موفقیت ثبت شد</p>
</div>

<div class="box1" id="box1">
</div>


<div id="box2" class="box1">

</div>

<div id="box3" class="box1">
</div>

و همونطور که میبنید یک تابع تعریف شده در رویداد onclick به این صورت :


function tab(id)
{
var i = 1
for(i=1; i <= 2; i++)
{
document.getElementById("tab-" + i).className="tab-off";
}
document.getElementById("tab-" +id).className="tab-on";

$("#message-error").hide(500);
$("#message").hide(500);
$("#box3").hide();

if(id==1)
{
$("#box2").hide();
$.ajax()
$.post('categories/coding.php',
{form_menu:'form_menu'}
,function(response)
{

$('#box1').html(response).slideDown(500);


});
}

else if(id==2)
{
$("#box1").hide();
$.ajax()
$.post('categories/coding.php',
{tbl_menu:'tbl_menu'}
,function(response)
{

$("#box2").html(response).slideDown(500);

});

}

}

اما زمانیکه روی " منو جدید " و " مدیریت منو " کلیک میکنم فقط همین فرم باز میشه ،

و زمانیکه روی مدیریت منو کلیک کردم این پنجره فعال بشه :


128746

ظاهرا تابع اجرا نمیشه ، مشکل از چیست به نظر شما ؟