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="width: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="width: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>