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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
理解javascript回调函数
Dec 28 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
超实用的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与服务器IP的代码
2010/10/12 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
php函数与传递参数实例分析
2014/11/15 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
php实现zip文件解压操作
2015/11/03 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
Python中的rjust()方法使用详解
2015/05/19 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
python import 上级目录的导入
2020/11/03 Python
python数据抓取3种方法总结
2021/02/07 Python
初级会计求职信范文
2014/02/15 职场文书
团队精神口号
2014/06/06 职场文书
工作求职自荐信
2014/06/13 职场文书
工作表扬信范文
2015/01/17 职场文书
导师工作推荐信
2015/03/27 职场文书
《比的意义》教学反思
2016/02/18 职场文书
Java8中Stream的一些神操作
2021/11/02 Java/Android
MongoDB支持的索引类型
2022/04/11 MongoDB