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 大数据相加的问题
Aug 03 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
koa-passport实现本地验证的方法示例
Feb 20 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中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
python 数据类型强制转换的总结
2021/01/25 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
公司活动邀请函
2014/01/24 职场文书
中学生获奖感言
2014/02/04 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
AJAX实现省市县三级联动效果
2021/10/16 Javascript