js实现的tab标签切换效果代码分享


Posted in Javascript onAugust 25, 2015

这是一款基于js实现的tab标签切换效果,是一款无需jQuery,原生javascript制作的tab切换效果源码。点击上面的标题即可实现对应页面的切换功能,非常具有实用价值。
运行效果图:-------------------查看效果 下载源码-------------------

js实现的tab标签切换效果代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的js实现的tab标签切换效果代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现tab标签切换效果</title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ font-size:12px;}

#menu{width:360px; overflow:hidden; margin:100px auto;border:1px solid #BF9660;}
#menu #nav {display:block;width:100%;padding:0;margin:0;list-style:none;}
#menu #nav li {float:left;width:120px;}
#menu #nav li a {display:block;line-height:27px;text-decoration:none;padding:0 0 0 5px; text-align:center; color:#333;}
#menu_con{ width:358px; height:135px; border-top:none}
.tag{ padding:10px; overflow:hidden;}
.selected{background:#C5A069; color:#fff;}
</style>
</head>
<body>

<!--代码部分begin-->
<div id="menu">
<!--tag标题-->
  <ul id="nav">
    <li><a href="#" class="selected">jQuery特效</a></li>
    <li><a href="#" class="">tab切换</a></li>
    <li><a href="#" class="">菜单导航</a></li>
  </ul>
<!--二级菜单-->
  <div id="menu_con">
    <div class="tag" style="display:block">
      这里是jQuery特效内容列表
     </div> 
    <div class="tag" style="display:none">
      这里是tab切换效果  
     </div> 
    <div class="tag" style="display:none">
      这里是菜单导航效果
    </div> 
</div>
</div>
<script>
var tabs=function(){
  function tag(name,elem){
    return (elem||document).getElementsByTagName(name);
  }
  //获得相应ID的元素
  function id(name){
    return document.getElementById(name);
  }
  function first(elem){
    elem=elem.firstChild;
    return elem&&elem.nodeType==1? elem:next(elem);
  }
  function next(elem){
    do{
      elem=elem.nextSibling; 
    }while(
      elem&&elem.nodeType!=1 
    )
    return elem;
  }
  return {
    set:function(elemId,tabId){
      var elem=tag("li",id(elemId));
      var tabs=tag("div",id(tabId));
      var listNum=elem.length;
      var tabNum=tabs.length;
      for(var i=0;i<listNum;i++){
          elem[i].onclick=(function(i){
            return function(){
              for(var j=0;j<tabNum;j++){
                if(i==j){
                  tabs[j].style.display="block";
                  //alert(elem[j].firstChild);
                  elem[j].firstChild.className="selected";
                }
                else{
                  tabs[j].style.display="none";
                  elem[j].firstChild.className="";
                }
              }
            }
          })(i)
      }
    }
  }
}();
tabs.set("nav","menu_con");//执行
</script>
<!--代码部分end-->


</body>
</html>

以上就是为大家分享的简单纯js实现点击切换TAB标签实例,希望大家可以喜欢。

Javascript 相关文章推荐
JS启动应用程序的一个简单例子
May 11 Javascript
超级退弹代码
Jul 07 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 #Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 #Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 #Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 #Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 #Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 #Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 #Javascript
You might like
php实现网站插件机制的方法
2009/11/10 PHP
php smarty函数扩展
2010/03/15 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
Python中os.path用法分析
2015/01/15 Python
详解在Python中处理异常的教程
2015/05/24 Python
python简单实现旋转图片的方法
2015/05/30 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
python如何在循环引用中管理内存
2018/03/20 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
python的launcher用法知识点总结
2020/08/07 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
售后专员岗位职责
2013/12/08 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
导游词300字
2015/02/13 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
快速学习Oracle触发器和游标
2021/06/30 Oracle