javascript实现标签切换代码示例

 更新时间:2016年05月22日 15:30:57   作者:中研左松  
本文给大家分享的事tab切换的两段js,均可实现标签切换功能,大家根据自己的需求自由选择

两则代码都很简单,这里就不多废话了,直接上代码

代码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();

  });  

});

相关文章

  • js对table的td进行相同内容合并示例详解

    js对table的td进行相同内容合并示例详解

    正如标题所言如何对table的td进行相同内容合并,下面为大家详细介绍下使用js是如何做到的,感兴趣的朋友不要错过
    2013-12-12
  • Javascript加载速度慢的解决方案

    Javascript加载速度慢的解决方案

    在网站里面会加载一些js代码,统计啊,百度广告等等,结果弄得页面加载速度很慢,下面有个不错的解决方法,大家可以参考下
    2014-03-03
  • js实现小时钟效果

    js实现小时钟效果

    这篇文章主要为大家详细介绍了js实现小时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • javascript实现label标签跳出循环操作

    javascript实现label标签跳出循环操作

    这篇文章主要为大家详细介绍了javascript实现label标签跳出循环操作,感兴趣的朋友可以参考一下
    2016-03-03
  • js 异步操作回调函数如何控制执行顺序

    js 异步操作回调函数如何控制执行顺序

    本文为大家讲解下js异步操作时回调函数如何控制执行顺序,感兴趣的朋友可以参考下
    2013-12-12
  • 小程序组件之自定义顶部导航实例

    小程序组件之自定义顶部导航实例

    这篇文章主要给大家介绍了关于小程序组件之自定义顶部导航的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • JS获取年月日时分秒的方法分析

    JS获取年月日时分秒的方法分析

    这篇文章主要介绍了JS获取年月日时分秒的方法,结合实例形式分析了JS获取具体时间的常犯错误与相应解决方法,需要的朋友可以参考下
    2016-11-11
  • js继承实现方法详解

    js继承实现方法详解

    这篇文章主要介绍了js继承实现方法,结合实例形式分析了javascript继承的实现方法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • 原生JS实现酷炫分页效果

    原生JS实现酷炫分页效果

    这篇文章主要为大家详细介绍了原生JS实现酷炫分页效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 详解Webpack多环境代码打包的方法

    详解Webpack多环境代码打包的方法

    这篇文章主要介绍了详解Webpack多环境代码打包的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08

最新评论