用css、jquery做的选项卡效果,有一个小疑问,请高手指点,代码如下:
<!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=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ct:gt(0)").hide();
var hdw=$(".box ul li");
hdw.click(function(){
$(this).addClass("one")
.siblings().removeClass("one");
index=hdw.index(this);
$(".ct").eq(index).show()
.siblings().hide();
});
});
</script>
<style type="text/css">
*{padding:0px; margin:0px;}
body{font-size:12px; padding:100px;}
ul{list-style-type:none;height:30px;line-height:30px;}
.box ul li{float:left; position:relative; border:1px solid #000;margin-right:5px;padding:0px 5px;border-bottom:none;}
.box ul li.one{background:#fff;}
.content{width:325px; height:100px;border:1px solid #000;padding:10px;}
</style>
</head>
<body>
<div class="box">
<ul>
<li >课程介绍</li>
<li>报名流程</li>
<li>常见问题</li>
</ul>
<div class="content">
<div class="ct">随着移动互联网的兴起,互联网行业正向更加智能化的Web3.0时代迈进,中国互联网行业进入了高速发展的势态,PHP语言已经为大部分企业广泛应用和重视(如:新浪、百度、腾讯、TOM、淘宝、搜狐、网易等)PHP语言是各大IT公司首选的互联网编程语言。PHP开发优势明显,未来发展空间巨大,IT行业急需PHP开发人才。 </div>
<div class="ct">这里有后盾名学员对后盾网视频的评价,来后盾培训是你一生不悔的选择.用一个比喻来讲:后盾网实训课程不光是教你怎样开汽车,更是传授你如何制造汽车的技能.让学员自己能开发一个完整的框架产品,从深层次上掌握PHP的应用,这是后盾独有的。 </div>
<div class="ct">PHP主讲老师具有多年项目开发经验及企业培训经验,打造企业需要的人才. 就业老师提供给学员职业素质、职业经验、职业技能等全方位就业指导。 </div>
</div>
</div>
</body>
</html>
鼠标点击的时候给<li>添加类之后,为什么设为白色背景后,下面content的border会消失?