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>
[解决办法]
<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>
这样试试
