开发的时候遇到的js的问题高分求高手来

这几天开发的时候遇到一个问题 在html中可以正常显示的js代码 在jsp中不能显示有两个网页一个是html的 附上：left.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>管理页面</title><script src="js/prototype.lite.js" type="text/javascript"></script>
<script src="js/moo.fx.js" type="text/javascript"></script>
<script src="js/moo.fx.pack.js" type="text/javascript"></script>
<style>
body {
font:12px Arial, Helvetica, sans-serif;
color: #000;
background-color: #EEF2FB;
margin: 0px;
}
#container {
width: 182px;
}
H1 {
font-size: 12px;
margin: 0px;
width: 182px;
cursor: pointer;
height: 30px;
line-height: 20px;
}
H1 a {
display: block;
width: 182px;
color: #000;
height: 30px;
text-decoration: none;
moz-outline-style: none;
background-image: url(images/menu_bgS.gif);
background-repeat: no-repeat;
line-height: 30px;
text-align: center;
margin: 0px;
padding: 0px;
}
.content{
width: 182px;
height: 26px;

}
.MM ul {
list-style-type: none;
margin: 0px;
padding: 0px;
display: block;
}
.MM li {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 26px;
color: #333333;
list-style-type: none;
display: block;
text-decoration: none;
height: 26px;
width: 182px;
padding-left: 0px;
}
.MM {
width: 182px;
margin: 0px;
padding: 0px;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
clip: rect(0px,0px,0px,0px);
}
.MM a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 26px;
color: #333333;
background-image: url(images/menu_bg1.gif);
background-repeat: no-repeat;
height: 26px;
width: 182px;
display: block;
text-align: center;
margin: 0px;
padding: 0px;
overflow: hidden;
text-decoration: none;
}
.MM a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 26px;
color: #333333;
background-image: url(images/menu_bg1.gif);
background-repeat: no-repeat;
display: block;
text-align: center;
margin: 0px;
padding: 0px;
height: 26px;
width: 182px;
text-decoration: none;
}
.MM a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 26px;
color: #333333;
background-image: url(images/menu_bg1.gif);
background-repeat: no-repeat;
height: 26px;
width: 182px;
display: block;
text-align: center;
margin: 0px;
padding: 0px;
overflow: hidden;
text-decoration: none;
}
.MM a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 26px;
font-weight: bold;
color: #006600;
background-image: url(images/menu_bg2.gif);
background-repeat: no-repeat;
text-align: center;
display: block;
margin: 0px;
padding: 0px;
height: 26px;
width: 182px;
text-decoration: none;
}
</style>
</head><body>
<table width="100%" height="280" border="0" cellpadding="0" cellspacing="0" bgcolor="#EEF2FB">
  <tr>
    <td width="182" valign="top"><div id="container">
      <h1 class="type"><a href="javascript:void(0)">系统参数管理</a></h1>
      <div class="content">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="images/menu_topline.gif" width="182" height="5" /></td>
          </tr>
        </table>
        <ul class="MM">
  <li><a href="right.html" target="main">首页</a></li>
          <li><a href="list2.html" target="main">岗位管理</a></li>
          <li><a href="list.html" target="main">部门管理</a></li>
          <li><a href="list.html" target="main">用户管理</a></li>
        </ul>
      </div>
      <h1 class="type"><a href="javascript:void(0)">考勤信息管理</a></h1>
      <div class="content">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="images/menu_topline.gif" width="182" height="5" /></td>
          </tr>
        </table>
        <ul class="MM">
          <li><a href="http://www.hao123.com" target="main">员工签到</a></li>
          <li><a href="*" target="main">员工请假</a></li>
          <li><a href="*" target="main">员工外出</a></li>
          <li><a href="*" target="main">查看考勤</a></li>
        </ul>
      </div>
      <h1 class="type"><a href="javascript:void(0)">站内信息管理</a></h1>
      <div class="content">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="images/menu_topline.gif" width="182" height="5" /></td>
          </tr>
        </table>
        <ul class="MM">
  <li><a href="*" target="main">发送信息</a></li>
          <li><a href="*" target="main">收件箱</a></li>
          <li><a href="*" target="main">发件箱</a></li>
          <li><a href="*" target="main">草稿箱</a></li>
        </ul>
      </div>
      <h1 class="type"><a href="javascript:void(0)">公文审批管理</a></h1>
      <div class="content">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="images/menu_topline.gif" width="182" height="5" /></td>
          </tr>
        </table>
        <ul class="MM">
          <li><a href="*" target="main">新的流程</a></li>
          <li><a href="*" target="main">当前流程</a></li>
          <li><a href="*" target="main">待审批流程</a></li>
          <li><a href="*" target="main">流程进程</a></li>
        </ul>
      </div>
    </div>
        <h1 class="type"><a href="javascript:void(0)">新闻系统管理</a></h1>
      <div class="content">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td><img src="images/menu_topline.gif" width="182" height="5" /></td>
            </tr>
          </table>
        <ul class="MM">
            <li><a href="*" target="main">新闻查看</a></li>
          <li><a href="*" target="main">新闻评论</a></li>
          <li><a href="*" target="main">评论列表</a></li>
          <li><a href="*" target="main">登陆记录</a></li>
          <li><a href="*" target="main">运行状态</a></li>
        </ul>
      </div>
      </div>
  <h1 class="type"><a href="javascript:void(0)">新闻系统管理</a></h1>
      <div class="content">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td><img src="images/menu_topline.gif" width="182" height="5" /></td>
            </tr>
          </table>
        <ul class="MM">
            <li><a href="*" target="main">新闻查看</a></li>
          <li><a href="*" target="main">新闻评论</a></li>
          <li><a href="*" target="main">评论列表</a></li>
          <li><a href="*" target="main">登陆记录</a></li>
          <li><a href="*" target="main">运行状态</a></li>
        </ul>
      </div>
      </div>
  <h1 class="type"><a href="javascript:void(0)">新闻系统管理</a></h1>
      <div class="content">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td><img src="images/menu_topline.gif" width="182" height="5" /></td>
            </tr>
          </table>
        <ul class="MM">
            <li><a href="*" target="main">新闻查看</a></li>
          <li><a href="*" target="main">新闻评论</a></li>
          <li><a href="*" target="main">评论列表</a></li>
          <li><a href="*" target="main">登陆记录</a></li>
          <li><a href="*" target="main">运行状态</a></li>
        </ul>
      </div>
      </div>
        <script type="text/javascript">
var contents = document.getElementsByClassName('content');
var toggles = document.getElementsByClassName('type');

var myAccordion = new fx.Accordion(
toggles, contents, {opacity: true, duration: 400}
);
myAccordion.showThisHideOpen(contents[0]);
</script>
        </td>
  </tr>
</table>
</body>
</html>left.html中的下拉菜单效果可以正常显示 在原样copy的left.jsp中则不能正常显示求高手帮忙解决

解决方案 »

  1.   

    html 和jsp 的头部是不一样的
     jsp页面的头部是：
    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    -------------
    把你html 的头部也就是这个<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    改为jsp页面的头部先！
      

  2.   

    这样：把你html页面的head之前的代码改为：
    <%@ 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>这是改后的----------------------------
    <%@ 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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>管理页面</title><script src="js/prototype.lite.js" type="text/javascript"></script>
    <script src="js/moo.fx.js" type="text/javascript"></script>
    <script src="js/moo.fx.pack.js" type="text/javascript"></script>
    <style>
    body {
    font:12px Arial, Helvetica, sans-serif;
    color: #000;
    background-color: #EEF2FB;
    margin: 0px;
    }
    #container {
    width: 182px;
    }
    H1 {
    font-size: 12px;
    margin: 0px;
    width: 182px;
    cursor: pointer;
    height: 30px;
    line-height: 20px; 
    }
    H1 a {
    display: block;
    width: 182px;
    color: #000;
    height: 30px;
    text-decoration: none;
    moz-outline-style: none;
    background-image: url(images/menu_bgS.gif);
    background-repeat: no-repeat;
    line-height: 30px;
    text-align: center;
    margin: 0px;
    padding: 0px;
    }
    .content{
    width: 182px;
    height: 26px;}
    .MM ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    display: block;
    }
    .MM li {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 26px;
    color: #333333;
    list-style-type: none;
    display: block;
    text-decoration: none;
    height: 26px;
    width: 182px;
    padding-left: 0px;
    }
    .MM {
    width: 182px;
    margin: 0px;
    padding: 0px;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    clip: rect(0px,0px,0px,0px);
    }
    .MM a:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 26px;
    color: #333333;
    background-image: url(images/menu_bg1.gif);
    background-repeat: no-repeat;
    height: 26px;
    width: 182px;
    display: block;
    text-align: center;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    text-decoration: none;
    }
    .MM a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 26px;
    color: #333333;
    background-image: url(images/menu_bg1.gif);
    background-repeat: no-repeat;
    display: block;
    text-align: center;
    margin: 0px;
    padding: 0px;
    height: 26px;
    width: 182px;
    text-decoration: none;
    }
    .MM a:active {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 26px;
    color: #333333;
    background-image: url(images/menu_bg1.gif);
    background-repeat: no-repeat;
    height: 26px;
    width: 182px;
    display: block;
    text-align: center;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    text-decoration: none;
    }
    .MM a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 26px;
    font-weight: bold;
    color: #006600;
    background-image: url(images/menu_bg2.gif);
    background-repeat: no-repeat;
    text-align: center;
    display: block;
    margin: 0px;
    padding: 0px;
    height: 26px;
    width: 182px;
    text-decoration: none;
    }
    </style>
    </head><body>
    <table width="100%" height="280" border="0" cellpadding="0" cellspacing="0" bgcolor="#EEF2FB">
      <tr>
      <td width="182" valign="top"><div id="container">
      <h1 class="type"><a href="javascript:void(0)">系统参数管理</a></h1>
      <div class="content">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td><img src="images/menu_topline.gif" width="182" height="5" /></td>
      </tr>
      </table>
      <ul class="MM">
    <li><a href="right.html" target="main">首页</a></li>
      <li><a href="list2.html" target="main">岗位管理</a></li>
      <li><a href="list.html" target="main">部门管理</a></li>
      <li><a href="list.html" target="main">用户管理</a></li>
      </ul>
      </div>
      <h1 class="type"><a href="javascript:void(0)">考勤信息管理</a></h1>
      <div class="content">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td><img src="images/menu_topline.gif" width="182" height="5" /></td>
      </tr>
      </table>
      <ul class="MM">
      <li><a href="http://www.hao123.com" target="main">员工签到</a></li>
      <li><a href="*" target="main">员工请假</a></li>
      <li><a href="*" target="main">员工外出</a></li>
      <li><a href="*" target="main">查看考勤</a></li>
      </ul>
      </div>
      <h1 class="type"><a href="javascript:void(0)">站内信息管理</a></h1>
      <div class="content">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td><img src="images/menu_topline.gif" width="182" height="5" /></td>
      </tr>
      </table>
      <ul class="MM">
    <li><a href="*" target="main">发送信息</a></li>
      <li><a href="*" target="main">收件箱</a></li>
      <li><a href="*" target="main">发件箱</a></li>
      <li><a href="*" target="main">草稿箱</a></li>
      </ul>
      </div>
      <h1 class="type"><a href="javascript:void(0)">公文审批管理</a></h1>
      <div class="content">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td><img src="images/menu_topline.gif" width="182" height="5" /></td>
      </tr>
      </table>
      <ul class="MM">
      <li><a href="*" target="main">新的流程</a></li>
      <li><a href="*" target="main">当前流程</a></li>
      <li><a href="*" target="main">待审批流程</a></li>
      <li><a href="*" target="main">流程进程</a></li>
      </ul>
      </div>
      </div>
      <h1 class="type"><a href="javascript:void(0)">新闻系统管理</a></h1>
      <div class="content">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td><img src="images/menu_topline.gif" width="182" height="5" /></td>
      </tr>
      </table>
      <ul class="MM">
      <li><a href="*" target="main">新闻查看</a></li>
      <li><a href="*" target="main">新闻评论</a></li>
      <li><a href="*" target="main">评论列表</a></li>
      <li><a href="*" target="main">登陆记录</a></li>
      <li><a href="*" target="main">运行状态</a></li>
      </ul>
      </div>
      </div>
    <h1 class="type"><a href="javascript:void(0)">新闻系统管理</a></h1>
      <div class="content">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td><img src="images/menu_topline.gif" width="182" height="5" /></td>
      </tr>
      </table>
      <ul class="MM">
      <li><a href="*" target="main">新闻查看</a></li>
      <li><a href="*" target="main">新闻评论</a></li>
      <li><a href="*" target="main">评论列表</a></li>
      <li><a href="*" target="main">登陆记录</a></li>
      <li><a href="*" target="main">运行状态</a></li>
      </ul>
      </div>
      </div>
    <h1 class="type"><a href="javascript:void(0)">新闻系统管理</a></h1>
      <div class="content">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td><img src="images/menu_topline.gif" width="182" height="5" /></td>
      </tr>
      </table>
      <ul class="MM">
      <li><a href="*" target="main">新闻查看</a></li>
      <li><a href="*" target="main">新闻评论</a></li>
      <li><a href="*" target="main">评论列表</a></li>
      <li><a href="*" target="main">登陆记录</a></li>
      <li><a href="*" target="main">运行状态</a></li>
      </ul>
      </div>
      </div>
      <script type="text/javascript">
    var contents = document.getElementsByClassName('content');
    var toggles = document.getElementsByClassName('type');var myAccordion = new fx.Accordion(
    toggles, contents, {opacity: true, duration: 400}
    );
    myAccordion.showThisHideOpen(contents[0]);
    </script>
      </td>
      </tr>
    </table>
    </body>
    </html>