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

更新时间：2016年09月21日 08:51:41 作者：webdm

这篇文章主要介绍了JS实现简单的tab切换选项卡效果,涉及javascript结合鼠标事件对页面元素属性动态操作的相关技巧,需要的朋友可以参考下

本文实例讲述了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>

运行效果图如下：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

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

您可能感兴趣的文章:

Bootstrap表单简单实现代码
这篇文章主要为大家详细介绍了Bootstrap表单的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
JS页面延迟执行一些方法(整理)
一般在JS页面延迟执行一些方法，本文整理了一些，大家可以尝试操作下
2013-11-11
简单了解Ajax表单序列化的实现方法
这篇文章主要介绍了简单了解Ajax表单序列化的实现方法,随着Ajax的出现，表单序列化已经成为一种需求,在学习原生Ajax时,若用POST方法向后台提交数据时,就需要将表单序列化,需要的朋友可以参考下
2019-06-06
JavaScript之instanceof方法手写示例详解
这篇文章主要为大家介绍了JavaScript之instanceof方法手写示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
原生JavaScript编写canvas版的连连看游戏
这篇文章主要为大家详细介绍了原生JavaScript编写连连看游戏的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
JS+CSS实现感应鼠标渐变显示DIV层的方法
这篇文章主要介绍了JS+CSS实现感应鼠标渐变显示DIV层的方法,涉及javascript对div层的逐渐显示与隐藏的实现技巧,需要的朋友可以参考下
2015-02-02
JS实现图片验证码功能
这篇文章主要为大家详细介绍了JS实现图片验证码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
javascript面向对象三大特征之继承实例详解
这篇文章主要介绍了javascript面向对象三大特征之继承,简单描述了继承的概念、原理,并结合实例形式详细分析了继承的常见实现方法与操作注意事项,需要的朋友可以参考下
2019-07-07
全面讲解JavaScript原型与原型链
本文主要介绍了全面讲解JavaScript原型与原型链，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
JavaScript 赋值,浅复制和深复制的区别
这篇文章主要介绍了JavaScript 赋值,浅复制和深复制的区别，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-05-05