JS实现简单的tab切换选项卡效果


Posted in Javascript onSeptember 21, 2016

本文实例讲述了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">
<meta charset="UTF-8">
<head>
<title>JS自制简单使用的选项卡</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
#tabWarp{ width:400px; height:300px; border:1px solid #ccc; margin:10px auto;}
#tabMenu{ width:400px; height:25px; overflow:hidden; border-bottom:1px solid #ccc; margin-top:5px;}
#tabMenu ul li{ width:80px; float:left; list-style:none; font-size:12px; line-height:25px; height:25px; text-align:center; color:#0066CC; cursor:pointer; border-left:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #ccc; margin:0px 5px;}
#tabMenu ul li.curent{ font-size:13px; background:#FBF5E1; font-weight:bold; color:#FF6600;}
#tabContent{ width:390px; height:360px; padding:5px; font-size:12px;}
#tabContent .hide{ display:none;}
</style>
</head>
<body>
<h1 id="what"></h1>
<div id="tabWarp">
  <div id="tabMenu">
    <ul>
     <li class="curent">中餐</li>
     <li>西餐</li>
     <li>亚洲菜</li>
     <li>河南菜</li>
    </ul>
  </div>
  <div id="tabContent">
   <div>
     <p>中餐的内容</p>
   </div>
   <div class="hide">
     <p>西餐的内容</p>
   </div>
   <div class="hide">
     <p>亚洲菜的内容</p>
   </div>
   <div class="hide">
     <p>河南菜的内容</p>
   </div>
  </div>
</div>
<script>
 function fgTab(tabNav,tabBody){
  var tabMenu=document.getElementById(tabNav);
  var tabTitle=tabMenu.getElementsByTagName('li');
  var tabContent=document.getElementById(tabBody);
  var tabBody=tabContent.getElementsByTagName('div');
  function switchTab(i){
   tabTitle[i].onmouseover=function(){
    for(j=0; j<tabTitle.length; j++){
     if(i==j){
      tabTitle[j].className='curent';
      tabBody[j].style.display="block"; 
     }else{
      tabTitle[j].className='';
      tabBody[j].style.display="none"; 
     }
    }
    //document.getElementById('what').innerHTML = i+'<br/>'+out();
   }
  }
  for( i=0; i<tabTitle.length; i++){
   switchTab(i);
  }
 }
 function out(){
  return i + '<br/>'+j;
 }
</script>
<script>
 fgTab('tabMenu','tabContent');
</script>
</body>
</html>

运行效果图如下:

JS实现简单的tab切换选项卡效果

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS 控制小数位数的实现代码
Aug 02 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 #Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 #Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 #Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 #Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 #Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 #Javascript
JS获取鼠标相对位置的方法
Sep 20 #Javascript
You might like
MySQL相关说明
2007/01/15 PHP
详解PHP数组赋值方法
2015/11/07 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
vuex 的简单使用
2018/03/22 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python笔记之工厂模式
2019/11/20 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
大学生毕业自荐信
2013/10/10 职场文书
护理学专业推荐信
2013/12/03 职场文书
试用期员工考核制度
2014/01/22 职场文书
银行开业庆典方案
2014/02/06 职场文书
安全技术说明书
2014/05/09 职场文书
商业门面租房协议书
2014/11/25 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
MySQL大小写敏感的注意事项
2021/05/24 MySQL
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
Win11软件图标固定到任务栏
2022/04/19 数码科技
Django中celery的使用项目实例
2022/07/07 Python
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL