Jquery 实现标签切换效果

时间:2021-12-04 08:55:15

1、效果图

Jquery 实现标签切换效果

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>