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的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
vue使用Sass时报错问题的解决方法
Oct 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查询域名状态whois的类
2006/11/25 PHP
PHP 基本语法格式
2009/12/15 PHP
php中session使用示例
2014/03/29 PHP
php中动态修改ini配置
2014/10/14 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
pywinauto自动化操作记事本
2019/08/26 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
中专生求职自荐信范文
2013/12/22 职场文书
转党组织关系介绍信
2014/01/08 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
python tkinter实现定时关机
2021/04/21 Python
Python访问Redis的详细操作
2021/06/26 Python
Python编写nmap扫描工具
2021/07/21 Python