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 关闭IE6、IE7
Jun 01 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
javascript版2048小游戏
Mar 18 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
layui表格实现代码
May 20 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
vue中的循环对象属性和属性值用法
Sep 04 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开发需要注意的安全问题
2010/09/01 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
javascript 函数式编程
2007/08/16 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
一百多行python代码实现抢票助手
2018/09/25 Python
python实现动态创建类的方法分析
2019/06/25 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
控制工程专业个人求职信
2013/09/25 职场文书
法学专业毕业生自荐信范文
2013/12/18 职场文书
内业资料员岗位职责
2014/01/04 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
最美乡村教师观后感
2015/06/11 职场文书
研讨会致辞
2015/07/31 职场文书
初中体育教学随笔
2015/08/15 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers