<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换</title>
<style type="text/css">
* {padding: 0;margin: 0;}
　　li {list-style: none;}
.wrapper {
　　margin: 0 auto;
　　width: 100%;
　　max-width: 1140px;
}
.tabbox {
　　margin: 40px auto;
　　width: 400px;
　　height: 200px;
　　border: 1px solid #f70;
　　overflow: hidden;

}
.tabbox .tab-tit{
　　position: relative;
　　height: 40px;
}
ul {
　　position: absolute;
　　left: -1px;
　　width: 401px;
　　height: 40px;
　　line-height: 40px;
　　background-color: #eaeaea;
}
ul li {
　　float: left;
　　border-left: 1px solid #f70;
　　border-bottom: 1px solid #f70;
　　text-align: center;
　　width: 99px;
　　height: 40px;
　　overflow: hidden;
}
.clear {clear: both;}
.select {
　　padding-right: 1px;
　　border-bottom: none;
　　background-color: #fff;
}
a:link, a:visited {
　　font-size: 16px;
　　font-weight: bold;
　　color: #888;
　　text-decoration: none;
}
.select a {
　　color: #333;
}
a:hover, a:active {
　　color: #f20;
　　font-weight: bold;
}
.tab-txt {
　　width: 400px;
　　padding: 40px;
　　overflow: hidden;
}
.demo {display: none;}
.tab-txt p {
　　line-height: 40px;
}

</style>
</head>
<body>
　　<div class="wrapper">
　　　　<div id="tabBox" class="tabbox">
　　　　　　<div id="tabTit" class="tab-tit">
　　　　　　　　<ul>
　　　　　　　　　　<li class="select"><a href="javascript:;">女枪</a></li>
　　　　　　　　　　<li><a href="javascript:;">提莫</a></li>
　　　　　　　　　　<li><a href="javascript:;">盖伦</a></li>
　　　　　　　　　　<li><a href="javascript:;">剑圣</a></li>
　　　　　　　　</ul>
　　　　　　</div>
<!-- <div class="clear"></div> -->
　　　　<div id="tabTxt" class="tab-txt">
　　　　　　<div class="demo" style="display: block;">
　　　　　　　　<p>我有两把枪，一把叫射，另一把叫，啊~</p>
　　　　　　　　<p>你有一双迷人的眼睛，我非常喜欢！</p>
　　　　　　</div>
　　　　　　<div class="demo">
　　　　　　　　<p>我去前面探探路</p>
　　　　　　　　<p>提莫队长正在待命！</p>
　　　　　　</div>
　　　　　　<div class="demo">
　　　　　　　　<p>放马过来吧，你会死的很光荣的！</p>
　　　　　　　　<p>快点儿结束吧，我头有点儿转晕了……</p>
　　　　　　</div>
　　　　　　<div class="demo">
　　　　　　　　<p>我的剑就是你的剑。</p>
　　　　　　　　<p>眼睛多，看东西才会更加清楚</p>
　　　　　　</div>

　　　　</div>
　　</div>

</div>

<script type="text/javascript">
function $(id) {
　　return typeof id === "string" ? document.getElementById(id) : id;
}
window.onload = function() {
　　var tits = $("tabTit").getElementsByTagName("li");
　　var txts = $("tabTxt").getElementsByClassName("demo");
　　if(tits.length != txts.length) {return;}
　　for(var i=0,l=tits.length; i<l; i++) {
　　　　tits[i].id = i;
　　　　tits[i].onmouseover = function() {
　　　　　　for(var j=0; j<l; j++) {
　　　　　　tits[j].className = "";
　　　　　　txts[j].style.display = "none";
　　　　　}
　　　　this.className = "select";
　　　　txts[this.id].style.display = "block";
　　}
}

</script>
</body>
</html>

几种tab切换尝试 原生js的更多相关文章

  1. 标签页（tab）切换的原生js,jquery和bootstrap实现

    概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...

  2. 瀑布流的三种实现方式（原生js+jquery+css3）

    前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 ...

  3. 又一Tab切换效果（js实现）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  5. 原生js实现tab切换

    //通过原生js实现table切换<html><head><meta http-equiv="Content-Type" content=" ...

  6. 原生JS实现tab切换--web前端开发

    tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE ht ...

  7. 前端跨域问题相关知识详解（原生js和jquery两种方法实现jsonp跨域）

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  8. 使用原生js与jQuery分别实现一个简单的tab页签

    tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...

  9. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

随机推荐

  1. 知无涯者（The Man Who Knew Infinity）

    1913年的1月16号在剑桥大学的三一学院那里,著名的数学家哈代教授收到了一封信,信的开头是这种: "尊敬的先生.仅自我介绍例如以下,我是马德拉斯港务信托处的一个职员,年薪唯独20英镑.23 ...

  2. FZU Problem 2062 Suneast & Yayamao

    http://acm.fzu.edu.cn/problem.php?pid=2062 题目大意: 给你一个数n,要求求出用多少个数字可以表示1~n的所有数. 思路: 分解为二进制. 对于一个数n,看它 ...

  3. Openstack nova(二）——架构（一）

    架构源自需求 需求分析 软件架构大部分都来自于需求.能够说.有什么样的需求,就会有什么样的架构, 尽管不同一时候期,不同的人来实现,可能不全然一样.可是整体来说, 架构不会相差太远. 如今假设假设须要 ...

  4. linux安装anaconda

    打开网址:https://repo.continuum.io/archive/ 下载对应版本: 然后把下载的文件放到linux系统上 在终端执行: bash Anaconda3-5.1.0-Linux ...

  5. [Preact] Integrate react-router with Preact

    React-router is the community favourite routing solution - it can handle all of your complex routing ...

  6. google校招在线測试题---2048

    先附代码:(简单地说就是给出一个矩阵代表2048游戏的一个状态以及一个方向,输出往这个方向移动之后的矩阵) #include<iostream> #include<fstream&g ...

  7. struts2漏洞原理及解决的方法

    1.原理 Struts2的核心是使用的webwork框架,处理 action时通过调用底层的getter/setter方法来处理http的參数,它将每一个http參数声明为一个ONGL(这里是ONGL ...

  8. Apache与weblogic整合实战（独家研究）

    用apache来处理外界的请求,再把请求转发给wls,这样就行突破wls express版本号的5用户限制 详细配置例如以下 copy ${WLS_Server}/server/lib下的mod_wl ...

  9. stm32优先级

  10. 【b601】能量项链

    Time Limit: 1 second Memory Limit: 50 MB [问题描述] 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾 ...