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 相关文章推荐
JavaScript 的继承
Oct 01 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
js+canvas绘制图形验证码
Sep 21 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
Jquery 常用方法经典总结
2010/01/28 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
建筑学推荐信
2013/11/03 职场文书
2014年会演讲稿范文
2014/01/06 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
片区教研活动总结
2014/07/02 职场文书
校庆团日活动总结
2014/08/28 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang