Create tab menu with javascript

Greetings
I want to make a form like this: http://www.8pic.ir/images/ydqm6tzi3m5ytxz9gahs.jpg
UL and LI-made menus using code like this :
<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>

And a defined function in the onclick event of the form :

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);

});

}

}

But when the "new menu" and "Administration Menu" and I just took the same form,

When I click on the active window's control menu: http://www.8pic.ir/images/7m8qdpzv0se5varo2u9g.jpg

Apparently can not function, the problem is in your opinion?