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 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
Vue使用screenfull实现全屏效果
Sep 17 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
简单易用的计数器(数据库)
2006/10/09 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
js style动态设置table高度
2014/10/21 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
Python WSGI的深入理解
2018/08/01 Python
Python给图像添加噪声具体操作
2019/03/03 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
大学教师年终总结的自我评价
2013/10/29 职场文书
市场营销工作计划书
2014/05/06 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
python实现图片批量压缩
2021/04/24 Python