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对象的property和prototype是什么一种关系
Aug 06 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
js显示文本框提示文字的方法
May 07 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
javascript对象的相关操作小结
May 16 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
第八节 访问方式 [8]
2006/10/09 PHP
PHP 上传文件的方法(类)
2009/07/30 PHP
PHP教程 基本语法
2009/10/23 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
Python找出9个连续的空闲端口
2016/02/01 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
标记环介质访问控制协议
2016/03/27 面试题
入党申请人的自我鉴定
2013/12/01 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
小学评语大全
2014/04/22 职场文书
北京申奥口号
2014/06/19 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
敬老月活动总结
2014/08/28 职场文书
办公室日常管理制度
2015/08/04 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS