JS和JQ写的Tab切换怎么兼容IE6
1个回答
2016-06-21 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>JS</title>
<STYLE>
* {
padding-bottom: 0px;
list-style-type: none;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}
.tabs {
border-bottom: black 0px solid;
border-left: black 1px solid;
margin: 0px auto;
width: 852px;
height: auto;
overflow: hidden;
border-top: black 1px solid;
border-right: black 1px solid;
}
.caption {
position: relative;
background-color: #f7f7f7;
margin: auto;
height: 26px;
}
.caption UL {
position: absolute;
width: 852px;
left: -1px;
}
.caption LI {
border-bottom: #eee 1px solid;
text-align: center;
padding-bottom: 0px;
line-height: 26px;
background-color: #f7f7f7;
padding-left: 1px;
width: 140px;
padding-right: 1px;
float: left;
height: 26px;
overflow: hidden;
padding-top: 0px;
}
.caption LI.select {
border-bottom-style: solid;
border-bottom-color: #ffffff;
border-left: #eee 1px solid;
padding-bottom: 0px;
background-color: #fafae4;
padding-left: 0px;
padding-right: 0px;
font-weight: bold;
border-right: #eee 1px solid;
padding-top: 0px;
}
.caption LI A {
color: #000000;
font-size: 14px;
text-decoration: none;
}
#content {
border-bottom: black 1px solid;
position: absolute;
border-left: black 1px solid;
background-color: #fafae4;
margin: auto;
width: 852px;
height: 268px;
border-top: black 0px solid;
border-right: black 1px solid;
}
</STYLE>
<script type="text/javascript">
var index = 0;
window.onload = function ()
{
var ul = document.getElementById ("button");
var btns = ul.getElementsByTagName ("li");
var content = document.getElementById ("content");
var cs = content.getElementsByTagName ('div');
for ( var i = 0; i < btns.length; i++)
{
btns[i].index = i;
btns[i].onclick = function ()
{
btns[index].className = '';
cs[index].style.display = 'none';
this.className = "select";
cs[this.index].style.display = 'block';
index = this.index;
}
}
}
</script>
</head>
<body>
<div class="tabs">
<div class="caption">
<ul id="button">
<li class="select"><a href="#">用户注册</a>
</li>
<li><a href="#">个人资料</a>
</li>
<li><a href="#">地址/联系方式</a>
</li>
<li><a href="#">个人信息</a>
</li>
<li><a href="#">家庭情况/兴趣爱好</a>
</li>
<li><a href="#">开户信息</a>
</li>
</ul>
</div>
<div id="content">
<div class="con" style="display: block;">a</div>
<div class="con" style="display: none;">b</div>
<div class="con" style="display: none;">c</div>
<div class="con" style="display: none;">d</div>
<div class="con" style="display: none;">e</div>
<div class="con" style="display: none;">f</div>
</div>
</div>
</body>
</html>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
