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 相关文章推荐
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
详解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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
python实现的重启关机程序实例
2014/08/21 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
Python多进程机制实例详解
2015/07/02 Python
答题辅助python代码实现
2018/01/16 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
python 实现两个线程交替执行
2020/05/02 Python
Python实现SMTP邮件发送
2020/06/16 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
网络编辑岗位职责
2014/03/18 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
介绍一下28个JS常用数组方法
2022/05/06 Javascript