首页 > 编程语言 > 详细

JavascriptTAB切换 AND JqueryTAB切换

时间:2016-01-20 20:42:42      阅读:111      评论:0      收藏:0      [点我收藏+]

前端半年纪念。

 

在线演示地址:

JS版本 http://jsbin.com/yumubaxeho/edit?html,output

JQ版本 http://jsbin.com/jifuqaheda/edit?html,output

 

CSS部分

*{margin: 0; padding: 0;}
  #tab_nav { width: 306px; height: 30px;}
  #tab_nav span {float: left; width:100px;border: 1px solid #333;font-size: 20px; height: 30px;text-align: center; line-height: 30px; cursor: pointer; }
  #tab_nav span.click { background: #ff5656; color: #fff;}
  #tab_content { width: 304px;}
  #tab_content div {width: 304px; height: 200px; display: none;border: 1px solid #333;}
  #tab_content div.show { display: block;}

HTML部分

<div id="tab_nav">
   <span>A</span>
   <span>B</span>
   <span>C</span>
</div>

<div id="tab_content">
   <div>AAAA</div>
   <div>BBBB</div>
   <div>CCCC</div>
</div>

JS部分

      var tab_nav  = document.getElementById(‘tab_nav‘).getElementsByTagName(‘span‘);
      var tab_content  = document.getElementById(‘tab_content‘).getElementsByTagName(‘div‘);
      tab_nav[0].className = "click";
      tab_content[0].className = "show";
      for(var i=0; i < tab_nav.length; i++){
        tab_nav[i].index = i;
        tab_nav[i].addEventListener(‘mouseover‘,function(){
          for(var j=0; j<tab_nav.length; j++){
              tab_nav[j].className = "";
              tab_content[j].className = "";
          }
          this.className = "click";
          tab_content[this.index].className = "show";
        });
      }

JQ部分

      var tab_nav     =  $(‘#tab_nav‘).find(‘span‘);
      var tab_content =  $(‘#tab_content‘).find(‘div‘);
      tab_nav.eq(0).addClass(‘click‘);
      tab_content.eq(0).addClass(‘show‘);
      tab_nav.on(‘mouseover‘,function(){
        $(this).addClass(‘click‘).siblings().removeClass();
        tab_content.eq($(this).index()).addClass(‘show‘).siblings().removeClass();
      });

 

JavascriptTAB切换 AND JqueryTAB切换

原文:http://www.cnblogs.com/okaeri/p/5146346.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!