关于一个JS选项卡的问题

经理让我弄一个js实现的选项卡，我从网上找了一个，但是在修改的时候下载的那个东东有三个选项，我想加一个但是加上以后并不在那三个选项的后面排列，而是到了第一个选项卡的下面，郁闷，请那个大侠帮我看看应该改下哪里，
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'test4.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选项卡效果</title>
<style type="text/css">
body {
margin: 80px 0 0 200px;
padding: 0;
width: 1024px;
border: 0;
background: #fff;
color: #000;
line-height: 18px;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', '宋体', '新宋体',
verdana, sans-serif;
font-size: 12px;
}a {
color: #000;
text-decoration: none;
}a.a_cha0:link {
color: #9e9e9e;
display: block;
width: 108px;
height: 27px;
text-decoration: none
}a.a_cha0:visited {
color: #9e9e9e;
display: block;
width: 108px;
height: 27px;
text-decoration: none
}a.a_cha0:hover {
color: #37790D;
font-weight: bold;
background: #ffffff;
display: block;
width: 108px;
height: 27px;
text-decoration: none
}#show {
background: #E1FCC7;
width: 440px;
margin: 0;
padding: 10px;
}#show_cont {
margin: 0;
padding: 0;
width: 436px;
height: 300px;
background: #fff;
border: 1px #BEC0D5 solid;
}.show_title {
float: left;
height: 28px;
width: 100%;
background: url(http://www.cbiw.com.cn/email_z/images/bg_show_title.gif)
left 0 repeat-x;
}.show_title ul {
list-style-type: none;
margin: 0;
padding: 0;
}.show_title li {
float: left;
width: 108px;
height: 28px;
text-align: center;
border-right: 1px #BEC0D5 solid;
}.show_p10 {
padding-top: 5px;
}.show_tex {
margin: 0;
padding: 0;
float: left;
width: 436px;
overflow: hidden;
}.show_tab {
color: #37790D;
font-weight: bold;
background: #fff;
width: 108px;
height: 28px;
}
</style>
<script language="JavaScript" type="text/javascript">
function setFocus1(i)
{
 selectLayer1(i);
}
function selectLayer1(i)                                              //目前定义了3个版块 具体拿出计划来再定
            
{
 switch(i)
 {
 case 1:
 document.getElementById("focusPic1").style.display="block";          //图1
 document.getElementById("focusPic2").style.display="none";
 document.getElementById("focusPic3").style.display="none";
 document.getElementById("focusPic4").style.display="none";
 document.getElementById("focusPic1nav").style.display="block";
 document.getElementById("focusPic2nav").style.display="none";
 document.getElementById("focusPic3nav").style.display="none";
 document.getElementById("focusPic4nav").style.display="none";
 break;
 case 2:
 document.getElementById("focusPic1").style.display="none";
 document.getElementById("focusPic2").style.display="block";
 document.getElementById("focusPic3").style.display="none";
 document.getElementById("focusPic4").style.display="none";
 document.getElementById("focusPic1nav").style.display="none";
 document.getElementById("focusPic2nav").style.display="block";
 document.getElementById("focusPic3nav").style.display="none";
 document.getElementById("focusPic4nav").style.display="none";
 break;
 case 3:
 document.getElementById("focusPic1").style.display="none";
 document.getElementById("focusPic2").style.display="none";
 document.getElementById("focusPic3").style.display="block";
 document.getElementById("focusPic4").style.display="none";
 document.getElementById("focusPic1nav").style.display="none";
 document.getElementById("focusPic2nav").style.display="none";
 document.getElementById("focusPic3nav").style.display="block";
 document.getElementById("focusPic4nav").style.display="none";
 break;
 case 4:
 document.getElementById("focusPic1").style.display="none";
 document.getElementById("focusPic2").style.display="none";
 document.getElementById("focusPic3").style.display="none";
 document.getElementById("focusPic4").style.display="block";
 document.getElementById("focusPic1nav").style.display="none";
 document.getElementById("focusPic2nav").style.display="none";
 document.getElementById("focusPic3nav").style.display="none";
 document.getElementById("focusPic4nav").style.display="block";
 break;
 }
}
</script>
</head> <body>
<div id="show">
<div id="show_cont"> <div class="show_title" id="focusPic1nav" style="display: block;">
<ul>
<li class="show_tab">
<div class="show_p10">最新招商</div>
</li>

<li>
<a href="javascript:setFocus1(2);" target="_self" class="a_cha0"><div class="show_p10">行业资讯</div></a>
</li>

<li>
<a href="javascript:setFocus1(3);" target="_self" class="a_cha0"><div class="show_p10">美容人才</div></a>
</li>
<li>
<a href="javascript:setFocus1(4);" target="_self" class="a_cha0"><div class="show_p10">爱迪通信</div></a>
</li>
</ul>
</div>
<div class="show_title" id="focusPic2nav" style="display: none">
<ul>
<li>
<a href="javascript:setFocus1(1);" target="_self" class="a_cha0"><div class="show_p10">最新招商</div></a>
</li>
<li class="show_tab">
    <div class="show_p10">行业资讯</div>
</li>
<li>
<a href="javascript:setFocus1(3);" target="_self" class="a_cha0"><div class="show_p10">美容人才</div></a>
</li>
<li>
<a href="javascript:setFocus1(4);" target="_self" class="a_cha0"><div class="show_p10">爱迪通信</div></a>
</li>
</ul>
</div> <div class="show_title" id="focusPic3nav" style="display: none;">
<ul>
<li>
<a href="javascript:setFocus1(1);" target="_self" class="a_cha0"><div class="show_p10">最新招商</div></a>
</li>
<li>
<a href="javascript:setFocus1(2);" target="_self" class="a_cha0"><div class="show_p10">行业资讯</div></a>
</li>
<li class="show_tab">
<div class="show_p10">美容人才</div>
</li>
<li>
<a href="javascript:setFocus1(4);" target="_self" class="a_cha0"><div class="show_p10">爱迪通信</div></a>
</li>
</ul>
</div>
                <div class="show_title" id="focusPic3nav" style="display: none;">
                        <li>
<a href="javascript:setFocus1(1);" target="_self" class="a_cha0"><div class="show_p10">最新招商</div></a>
</li>
<li>
<a href="javascript:setFocus1(2);" target="_self" class="a_cha0"><div class="show_p10">行业资讯</div></a>
</li>
<li>
<a href="javascript:setFocus1(3);" target="_self" class="a_cha0"><div class="show_p10">美容人才</div></a>
</li>
                        <li class="show_tab">
<div class="show_p10">爱迪通信</div>
</li>
                </div>
<div class="show_tex" id="focusPic2" style="display: none">
<b>选项卡效果：B</b>
</div>
<div class="show_tex" id="focusPic1" style="display: block;">
<b>选项卡效果：A</b>
</div>
<div class="show_tex" id="focusPic3" style="display: none;">
<b>选项卡效果：C</b>
</div>
               <div class="show_tex" id="focusPic4" style="display: none;">
<b>选项卡效果：D</b>
</div>
</div>
</div> </body>
</html>