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操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
js单例模式详解实例
Nov 21 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 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与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
JQuery中each()的使用方法说明
2010/08/19 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
wxPython 入门教程
2008/10/07 Python
python 连接sqlite及简单操作
2017/06/30 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
Python统计单词出现的次数
2018/04/04 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
销售自我评价
2013/10/22 职场文书
出纳岗位职责
2013/11/09 职场文书
最新教师自我评价分享
2013/11/12 职场文书
毕业生面试求职信
2014/06/23 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书