打赏

Jquery 实现标签切换效果

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>

 

posted @ 2019-01-08 15:06  学习靠自己  阅读(1586)  评论(0)  编辑  收藏  举报