1、效果图
2、HTML代码如下
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="IndusJS/jquery.min.js"></script>
<style type="text/css">
.main02 {width:100%;}
#title02 {height:25px;line-height:25px;overflow:hidden;border-bottom:2px solid black;}
#title02 ul
{
width:100%;
height:25px;
margin:0px;
}
#title02 ul li {float:left; width:65px; height:20px;line-height:20px; color:#333;list-style:none; cursor:pointer; font-weight:bold;text-align:center;}
#title02 li.on {background-color:blueviolet;color:white;}
#con02 {background:#fafafa;height:100px;}
#con02 div.off {display:none; padding:5px;}
#con02 div.on {display:block;}
</style>
</head>
<body>
<div style="400px;height:500px;">
<div id="diva0" class="main02">
<div id="title02">
<ul>
<li class="on">标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
</div>
<div id="con02" style="100%;height:70px;">
<div id="diva2" class="on" style="padding:15px 0px 0px 15px;">
标题1
</div>
<div id="diva3" class="off">
标题2
</div>
<div id="diva4" class="off">
标题3
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var bTitle = document.getElementById('title02');
var cSpan = bTitle.getElementsByTagName('li');
var i = 0;
for (i = 0; i < cSpan.length; i++) {
switch (i) {
case 0:
cSpan[0].onclick = function () {
cSpan[0].className = 'on';
cSpan[1].className = '';
cSpan[2].className = '';
$('#diva2').attr('class', 'on');
$('#diva3').attr('class', 'off');
$('#diva4').attr('class', 'off');
}
break;
case 1:
cSpan[1].onclick = function () {
cSpan[0].className = '';
cSpan[1].className = 'on';
cSpan[2].className = '';
$('#diva2').attr('class', 'off');
$('#diva3').attr('class', 'on');
$('#diva4').attr('class', 'off');
}
break;
case 2:
cSpan[2].onclick = function () {
cSpan[0].className = '';
cSpan[1].className = '';
cSpan[2].className = 'on';
$('#diva2').attr('class', 'off');
$('#diva3').attr('class', 'off');
$('#diva4').attr('class', 'on');
}
break;
}
}
</script>