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 相关文章推荐
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
js实现简单选项卡功能
Mar 23 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 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
Terran兵种介绍
2020/03/14 星际争霸
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中的zip函数使用示例
2015/01/29 Python
python基于http下载视频或音频
2018/06/20 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
python的debug实用工具 pdb详解
2019/07/12 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
Html5定位终极解决方案
2020/02/05 HTML / CSS
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
小学教师岗位职责
2013/11/25 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
三峡大坝导游词
2015/01/31 职场文书
文艺节目主持词
2015/07/06 职场文书
高一英语教学反思
2016/03/03 职场文书
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js