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 Event学习第四章 传统的事件注册模型
Feb 07 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 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 获取本地IP代码
2013/06/23 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
python将图片文件转换成base64编码的方法
2015/03/14 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
python字符串中的单双引
2017/02/16 Python
python reverse反转部分数组的实例
2018/12/13 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
法国家具及室内配件店:home24
2017/01/21 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
2014新年元旦活动策划方案
2014/02/18 职场文书
爱心活动计划书
2014/04/26 职场文书
学校志愿者活动总结
2014/06/27 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
Android Studio 计算器开发
2022/05/20 Java/Android