js封装tab标签页实例分享

话不多说，请看代码

<html>
<head>
  <title></title>
  <meta charset="UTF-8">
  <style>
    *{ padding:0; margin:0;}
    .block{ display:block;}
    .none{ display:none;}
    #wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;}
    #tab1,#tab2{ list-style:none;}
    #tab1 li,#tab2 li{ width:66px; height:28px; border:1px solid #09C; text-align:center; line-height:28px; float:left; cursor:pointer; margin-right:3px;}
    #tab2 li:hover{ background:#CCC;}
    #tab1 li.on,#tab2 li.on{ background:#9C3;}
    #wrap div,#wraps div{ width:498px; height:198px; border:1px solid #000;}
  </style>
</head>
<body>
<div id="wrap">
  <ul id="tab1">
    <li class="on">第一项</li>
    <li>第二项</li>
    <li>第三项</li>
  </ul>
  <br clear="all" />
  <div class="block">第一部分</div>
  <div class="none">第二部分</div>
  <div class="none">第三部分</div>
</div>
<div id="wraps">
  <ul id="tab2">
    <li class="on">第一项</li>
    <li>第二项</li>
    <li>第三项</li>
  </ul>
  <br clear="all" />
  <div class="block">第一部分</div>
  <div class="none">第二部分</div>
  <div class="none">第三部分</div>
</div>
<script type="text/javascript">
  tab("wrap","tab1","mouseover")
  tab("wraps","tab2");
  function tab(wrap,navul,eve){
//tab效果封装，目前只有两种变换方式，一种为点击事件click（也是默认事件），另外一种为鼠标移过事件mouseover
    var divs=document.getElementById(wrap).getElementsByTagName("div");
    var lis=document.getElementById(navul).getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
      lis[i].indx=i;
      if(eve=="click" || eve==null){
        lis[i].onclick=function(){
          for(i=0;i<lis.length;i++){
            lis[i].className="";
            divs[i].className="none";
            this.className="on";
            divs[this.indx].className="block";
          }
        }
      }else if(eve=="mouseover"){
        lis[i].onmouseover=function(){
          for(i=0;i<lis.length;i++){
            lis[i].className="";
            divs[i].className="none";
            this.className="on";
            divs[this.indx].className="block";
          }
        }
      }
    }
  }
</script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • js与jquery分别实现tab标签页功能的方法

    本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 <style type="text/css"> *{margin: 0;padding: 0;} #myul li {list-style: none; float: left; border: 1px solid #ddd; width: 100px; height: 20px; text-align: center; line-height: 2

  • javascript实现不同颜色Tab标签切换效果

    javascript实现不同颜色Tab标签切换效果

    本文实例为大家分享了javascript不同颜色Tab标签切换效果的实现代码,供大家参考,具体内容如下 具体代码: <html> <head> <title>不同颜色选项卡</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <style type="text/css">

  • JS实现常见的TAB、弹出层效果(TAB标签，斑马线，遮罩层等)

    JS实现常见的TAB、弹出层效果(TAB标签，斑马线，遮罩层等)

    本文实例讲述了JS实现常见的TAB.弹出层效果.分享给大家供大家参考.具体如下: 这里演示tab活页夹(网页标签),斑马线,遮罩层.弹出层的简单实现,里面的JS文件,可下拉保存为JS代码调用即可,也可以拷贝在本网页中使用.这个小网页囊括了目前网上流行的风页标签.弹出层以及斑马线效果,很实用啦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tab-alert-bq-style-demo/ 具体代码如下: <!DOCTYPE html PU

  • JavaScript实现的原生态Tab标签页功能【兼容IE6】

    JavaScript实现的原生态Tab标签页功能【兼容IE6】

    本文实例讲述了JavaScript实现的原生态Tab标签页功能.分享给大家供大家参考,具体如下: 标签页是一个很常见的东西,在一些框架中也就很常见的, 但未必所有人都知道怎么写,很多人知道怎么在网上复制一份是真的, 这样不好,往往需要用大量的时间去修改网上复制下来的东西,还不如自己写一份快. 一.基本目标 创建一个如下的标签页,在IE8中与谷歌浏览器中的效果如下,几乎没有区别 谷歌浏览器: IE8: 二.制作过程 1.首先布置好场景,在一个图层内: 图层1~图层4四个超级链接是一个图层,然后各自

  • 纯css+js写的一个简单的tab标签页带样式

    纯css+js写的一个简单的tab标签页带样式

    最近经常要用tab标签页,所以写了一个简单的,以后用的话直接拷贝一个,稍微改改就OK了. 先看效果图:  接下来看下代码怎么写的吧: 一.sp文件easytab.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String b

  • javascript动态添加删除tabs标签的方法

    本文实例讲述了javascript动态添加删除tabs标签的方法.分享给大家供大家参考.具体实现方法如下: <html> <HEAD> <TITLE>网页对话</TITLE> <LINK href="style.css" type=text/css rel=stylesheet> <script> function $(obj) { var o = typeof(obj)=="object" ?

  • 基于JavaScript实现TAB标签效果

    js实现tab标签效果,在项目中经常用到,今天抽点时间把我写的js实现tab标签效果源码分享给大家,对js tab标签代码需要的朋友参考下 废话不多说了,直接给大家贴代码了: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content=&

  • js实现的tab标签切换效果代码分享

    js实现的tab标签切换效果代码分享

    这是一款基于js实现的tab标签切换效果,是一款无需jQuery,原生javascript制作的tab切换效果源码.点击上面的标题即可实现对应页面的切换功能,非常具有实用价值. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js实现的tab标签切换效果代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

  • 简单纯js实现点击切换TAB标签实例

    简单纯js实现点击切换TAB标签实例

    一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果 使用方法: 1.将附件中的index.html中的css样式以及代码部分拷贝到你需要的地方即可 相关链接:几行简单的jQuery代码搞定tab标签切换效果 展示效果图: 效果展示  源码下载 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

  • 最简单纯JavaScript实现Tab标签页切换的方式(推荐)

    最简单纯JavaScript实现Tab标签页切换的方式(推荐)

    先说一下最土的一种方法: Html: <div class="tab-head"> <h2 id="tab1" onmouseover="changeTab1()" class="selected">1</h2> <h2 id="tab2" onmouseover="changeTab2()">2</h2> <h2 id=

  • js(JavaScript)实现TAB标签切换效果的简单实例

    js(JavaScript)实现TAB标签切换效果的简单实例

    一个可以js(JavaScript)的tab标签切换代码,可以自动适应宽度,可以自己添加删除标签块,傻瓜式操作便能完成! 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401- 19991224/loose.dtd"><HTML xmlns="http://www.w

  • js实现点击切换TAB标签实例

    js实现点击切换TAB标签实例

    本文实例讲述了js实现点击切换TAB标签.分享给大家供大家参考.具体如下: 这里演示的选项卡效果代码,无jq,纯JS来实现,灰色风格,没有怎么美化,或许看上去比较普通,不过兼容性和操作起来挺舒服的,风格适用于大部分的网站,或许你会用得上. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tab-click-cha-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

随机推荐