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 相关文章推荐
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
javascript RegExp 使用说明
May 21 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 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中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
jQuery1.6 使用方法一
2011/11/23 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
后勤个人工作总结
2015/02/28 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
详解CSS故障艺术
2021/05/25 HTML / CSS