使用Html+Css+js技术编写一个完整的tab切换效果的页面，效果如下所示：
自己写了代码，却找不出其中的错误<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%><%Str...
自己写了代码，却找不出其中的错误
<%@ 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 'test.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">
-->
<style type="text/css">
.test ul{ list-style:none; }
.test li{float:left;}
ul li{padding:1px;
margin:1px;
background-color:blue;
font-size:25px;
}
ul .li1{padding:1px;
margin:1px;
background-color:red;
font-size:25px;
}
ul li a:hover {color: #FF00FF}
.test1{
background-color:red;
position:relative;
top:30px;
height:1080px;
width:2080px;
}
</style>
<script type="text/javascript">
function tabSwitch2(_this,content_prefix,active) {
var tabs = document.getElementsByName(_this.name);
var number = tabs.length;
for (var i=0; i < number; i++) {
var tab = tabs[i];
tab.className = "";
document.getElementById(content_prefix+i).style.display = 'none';
}
_this.className = "easytab_active";
document.getElementById(content_prefix+active).style.display = 'block';
}
</script>
</head>
<body>
<div class="test">
<ul>
<li class="li1"><a name="easytab" class="easytab_active" onclick="tabSwitch2(this,'easytab_content_',0);">标签一</a></li>
<li><a name="easytab"onclick="tabSwitch2(this,'easytab_content_',1);">标签二</a></li>
<li><a name="easytab" onclick="tabSwitch2(this,'easytab_content_',2);">标签三</a></li>
</ul></div>
<div id="easytab_content_0" class="easytab_content"> <img src="images/1.jpg">123</div>
<div id="easytab_content_1" class="easytab_content"><img src="images/2.jpg"> 456</div>
<div id="easytab_content_2" class="easytab_content"><img src="images/3.jpg"> 789</div>
<script type="text/javascript">
document.getElementsByName("easytab")[0].onclick();//页面加载完成后，点击第一个标签
</script>
</body>
</html>
//主要是转换不了 展开
<%@ 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 'test.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">
-->
<style type="text/css">
.test ul{ list-style:none; }
.test li{float:left;}
ul li{padding:1px;
margin:1px;
background-color:blue;
font-size:25px;
}
ul .li1{padding:1px;
margin:1px;
background-color:red;
font-size:25px;
}
ul li a:hover {color: #FF00FF}
.test1{
background-color:red;
position:relative;
top:30px;
height:1080px;
width:2080px;
}
</style>
<script type="text/javascript">
function tabSwitch2(_this,content_prefix,active) {
var tabs = document.getElementsByName(_this.name);
var number = tabs.length;
for (var i=0; i < number; i++) {
var tab = tabs[i];
tab.className = "";
document.getElementById(content_prefix+i).style.display = 'none';
}
_this.className = "easytab_active";
document.getElementById(content_prefix+active).style.display = 'block';
}
</script>
</head>
<body>
<div class="test">
<ul>
<li class="li1"><a name="easytab" class="easytab_active" onclick="tabSwitch2(this,'easytab_content_',0);">标签一</a></li>
<li><a name="easytab"onclick="tabSwitch2(this,'easytab_content_',1);">标签二</a></li>
<li><a name="easytab" onclick="tabSwitch2(this,'easytab_content_',2);">标签三</a></li>
</ul></div>
<div id="easytab_content_0" class="easytab_content"> <img src="images/1.jpg">123</div>
<div id="easytab_content_1" class="easytab_content"><img src="images/2.jpg"> 456</div>
<div id="easytab_content_2" class="easytab_content"><img src="images/3.jpg"> 789</div>
<script type="text/javascript">
document.getElementsByName("easytab")[0].onclick();//页面加载完成后，点击第一个标签
</script>
</body>
</html>
//主要是转换不了 展开
2个回答
展开全部
<script type="text/javascript">
function tabSwitch2(_this,content_prefix,active) {
var tabs = document.getElementsByName(_this.name);
var number = tabs.length;
for (var i=0; i < number; i++) {
var tab = tabs[i];
tab.className = "";
tab.parentNode.className = '';
document.getElementById(content_prefix+i).style.display = 'none';
}
_this.className = "easytab_active";
document.getElementById(content_prefix+active).style.display = 'block';
tabs[active].style.className = 'easytab_active';
tabs[active].parentNode.className = 'li1';
}
</script>
替换一下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在我电脑上是可以的，你换个浏览器试试，还有不要禁用js
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
