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 js cookie的存储,获取和删除
Dec 29 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
原生js实现验证码功能
Mar 16 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
小程序实现筛子抽奖
May 26 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与php MySQL 之间的关系
2009/07/17 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
python中cPickle用法例子分享
2014/01/03 Python
python 全局变量的import机制介绍
2017/09/07 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
python中加背景音乐如何操作
2020/07/19 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
台湾生鲜宅配:大口市集
2017/10/14 全球购物
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
白酒业务员岗位职责
2013/12/27 职场文书
管理标语大全
2014/06/24 职场文书
敬老院标语
2014/06/27 职场文书
小学清明节活动总结
2014/07/04 职场文书
清洁工个人工作总结
2015/03/05 职场文书
2016寒假假期总结
2015/10/10 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python