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 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
JavaScript中出现乱码的处理心得
Dec 24 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
jquery append与appendTo方法比较
May 24 jQuery
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
php解决安全问题的方法实例
2019/09/19 PHP
简明json介绍
2008/09/28 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
python网络编程示例(客户端与服务端)
2014/04/24 Python
Python连接DB2数据库
2016/08/27 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
python操作excel让工作自动化
2019/08/09 Python
JDO的含义
2012/11/17 面试题
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
传播学毕业生求职信
2013/10/11 职场文书
学校门卫岗位职责
2014/03/16 职场文书
会计个人实习计划书
2014/08/15 职场文书
测量员岗位职责
2015/02/14 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
重阳节主题班会
2015/08/17 职场文书
个人道歉信大全
2019/04/11 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python
python 如何做一个识别率百分百的OCR
2021/05/29 Python
深入浅析Django MTV模式
2021/09/04 Python