javascript实现标签切换代码示例


Posted in Javascript onMay 22, 2016

两则代码都很简单,这里就不多废话了,直接上代码

代码1,

function ntabs(thisObj,Num)
      {if(thisObj.className == "active")return;  
      var tabObj = thisObj.parentNode.id;  
      var tabList = document.getElementById(tabObj).getElementsByTagName("li");  
      for(i=0; i <tabList.length; i++)
        {if (i == Num)
          {thisObj.className = "active";  
          document.getElementById(tabObj+"_cont"+i).style.display = "block";  
          }
          else{  
            tabList[i].className = "normal";  
            document.getElementById(tabObj+"_cont"+i).style.display = "none";  
        }  
      }  
    }

代码2,

$(document).ready(function(){

  var $tab_li = $('.tab ul li');

  $tab_li.hover(function(){

    $(this).addClass('selected').siblings().removeClass('selected');

    var index = $tab_li.index(this);

    $('div.tab_box > div').eq(index).show().siblings().hide();

  });  

});
Javascript 相关文章推荐
javascript中比较字符串是否相等的方法
Jul 23 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 Javascript
js实现滚动条自动滚动
Dec 13 Javascript
超实用的JavaScript代码段 附使用方法
May 22 #Javascript
JavaScript数组合并的多种方法
May 22 #Javascript
浅析JavaScript回调函数应用
May 22 #Javascript
为什么JavaScript没有块级作用域
May 22 #Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 #Javascript
全面解析bootstrap格子布局
May 22 #Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 #Javascript
You might like
PHP 7.0.2 正式版发布
2016/01/08 PHP
javascript是怎么继承的介绍
2012/01/05 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
python logging类库使用例子
2014/11/22 Python
python numpy 按行归一化的实例
2019/01/21 Python
python实现支付宝转账接口
2019/05/07 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
python解包概念及实例
2021/02/17 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
远程调用的原理
2014/07/05 面试题
护理学中专毕业生求职信
2013/11/11 职场文书
会计学个人自荐信模板
2013/12/13 职场文书
医学专业毕业生个人求职信
2013/12/25 职场文书
打架检讨书800字
2014/01/10 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
10的分与合教学反思
2014/04/30 职场文书
汽车广告策划方案
2014/05/31 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
2016年记者节感言
2015/12/08 职场文书
区域销售大会开幕词
2016/03/04 职场文书