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 25 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 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查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
JS焦点图切换,上下翻转
2011/05/12 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
python requests 测试代理ip是否生效
2018/07/25 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
用Python开发app后端有优势吗
2020/06/29 Python
Python利用命名空间解析XML文档
2020/08/10 Python
日语专业毕业生求职信
2013/12/04 职场文书
营销人才自我鉴定范文
2013/12/25 职场文书
单位介绍信范文
2014/01/18 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
小学清明节活动方案
2014/03/08 职场文书
党支部承诺书范文
2014/03/28 职场文书
社区植树节活动总结
2015/02/06 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js