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

  });  

});

相关文章

  • 用VsCode编辑TypeScript的实现方法

    用VsCode编辑TypeScript的实现方法

    这篇文章主要介绍了用VsCode编辑TypeScript的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 基于wordpress的ajax写法详解

    基于wordpress的ajax写法详解

    下面小编就为大家分享一篇基于wordpress的ajax写法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • 给应用部分的js代码设定一个统一的入口

    给应用部分的js代码设定一个统一的入口

    javascript是种脚本语言,浏览器下载到哪儿就会执行到哪儿,下面为大家介绍下,如何给应用部分的js代码一个统一的入口
    2014-06-06
  • JavaScript常用数组去重实战源码

    JavaScript常用数组去重实战源码

    本文给大家分享js常用8种数组去重实战源码,针对每种方法通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2021-07-07
  • webpack 单独打包指定JS文件的方法

    webpack 单独打包指定JS文件的方法

    下面小编就为大家分享一篇webpack 单独打包指定JS文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 学习javascript面向对象 掌握创建对象的9种方式

    学习javascript面向对象 掌握创建对象的9种方式

    这篇文章主要为大家介绍了创建对象的9种方式,帮助大家更好地学习javascript面向对象,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 利用JS实现文字的聚合动画效果

    利用JS实现文字的聚合动画效果

    这篇文章主要给大家介绍了利用JS如何实现文字的聚合动画效果,实现的效果非常不错,类似粒子动画的效果,有需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-01-01
  • 微信小程序实现瀑布流分页滚动加载

    微信小程序实现瀑布流分页滚动加载

    这篇文章主要为大家详细介绍了微信小程序实现瀑布流分页滚动加载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Js获取单选框radio的几种方式

    Js获取单选框radio的几种方式

    这篇文章主要介绍了Js获取单选框radio的几种方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • js实现无刷新监听URL的变化示例代码详解

    js实现无刷新监听URL的变化示例代码详解

    这篇文章主要介绍了js如何无刷新监听URL的变化,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06

最新评论