js选项卡在火狐无效，求教

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!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 runat="server">
    <title></title>
    <script type="text/jscript">
        function setTab(name, cursel, n) {
            for (i = 1; i <= n; i++) {
                var menu = document.getElementById(name + i);
                var con = document.getElementById("con_" + name + "_" + i);
                menu.className = i == cursel ? "hover" : "";
                con.style.display = i == cursel ? "block" : "none";
            }
        }
    </script>
    <style type="text/css">
        *
        {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .main
        {
            width: 700px;
            height: 600px;
            float: left;
            display: inline;
            padding: 3px;
            background-color: Gray;
        }
        .main .menu
        {
            width: 306px;
            height: 31px;
            overflow: hidden;
            float: left;
        }
        .main .menu span
        {
            width: 60px;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            text-align: center;
            float: left;
            margin: 1px 0 0 1px;
            background-color:Yellow;            color: #BCBCBC;
            font-weight: bold;
            cursor: pointer;
            font-size: 12px;
        }
        .main .menu .hover
        {
            background: #666;
            color: #FFF;
        }
        .main .content
        {
            width: 700px;
            height: 500px;
            overflow: hidden;
            float: left;
            margin: 1px;
            margin-top: 0px;
            display: inline;
            background-color: White;
        }
        .main .content div
        {
            width: 700px;
            height: 500px;
            color: Red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="main">
        <div class="menu">
            <span id="one1" onclick="setTab('one',1,5)" class="hover">选项卡1</span> <span id="one2"
                onclick="setTab('one',2,5)">选项卡2</span>
        </div>
        <div class="content">
            <div id="con_one_1">
                内容一
            </div>
            <div id="con_one_2" style="display: none">
                内容二</div>
        </div>
    </div>
    </form>
</body>
</html>

解决方案 »

  1.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title></title>
      <script type="text/javascript">
      function setTab(name, cursel, n) {
      for (i = 1; i <= n; i++) {
      var menu = document.getElementById(name + i);
      var con = document.getElementById("con_" + name + "_" + i);
      menu.className = i == cursel ? "hover" : "";
      con.style.display = i == cursel ? "block" : "none";
      }
      }
      </script>
      <style type="text/css">
      *
      {
      margin: 0px;
      padding: 0px;
      list-style: none;
      }
      .main
      {
      width: 700px;
      height: 600px;
      float: left;
      display: inline;
      padding: 3px;
      background-color: Gray;
      }
      .main .menu
      {
      width: 306px;
      height: 31px;
      overflow: hidden;
      float: left;
      }
      .main .menu span
      {
      width: 60px;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
      text-align: center;
      float: left;
      margin: 1px 0 0 1px;
      background-color:Yellow;  color: #BCBCBC;
      font-weight: bold;
      cursor: pointer;
      font-size: 12px;
      }
      .main .menu .hover
      {
      background: #666;
      color: #FFF;
      }
      .main .content
      {
      width: 700px;
      height: 500px;
      overflow: hidden;
      float: left;
      margin: 1px;
      margin-top: 0px;
      display: inline;
      background-color: White;
      }
      .main .content div
      {
      width: 700px;
      height: 500px;
      color: Red;
      font-weight: bold;
      }
      </style>
    </head>
    <body>
      <form id="form1" runat="server">
      <div class="main">
      <div class="menu">
      <span id="one1" onclick="setTab('one',1,2)" class="hover">选项卡1</span> <span id="one2"
      onclick="setTab('one',2,2)">选项卡2</span>
      </div>
      <div class="content">
      <div id="con_one_1">
      内容一
      </div>
      <div id="con_one_2" style="display: none">
      内容二</div>
      </div>
      </div>
      </form>
    </body>
    </html>
    这样试试