<!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. 图像处理 Mine

    1)中值滤波:排序取中间值.作用:去噪点 1.1)均值滤波; 1.2)高斯模糊:执行高斯模糊,然后改混合模式,改成叠加.柔光或者深色.就能得到平滑而不模糊的效果. 2)腐蚀.膨胀:开运算(腐蚀后膨胀) ...

  2. Fiddler抓包工具详细介绍

    本文转自:http://www.cnblogs.com/Chilam007/p/6985379.html 一.Fiddler与其他抓包工具的区别 1.Firebug虽然可以抓包,但是对于分析http请 ...

  3. 低成本开始互联网创业：探讨域名、服务器、CDN、邮箱等节流之道

    互联网创业一直是个热门话题,对这个问题我也有不断的思考. 今天,探讨下如何低成本开始互联网创业. 背景 愿意冒险去创业的同志,大多是"屌丝"而非"高富帅",大多 ...

  4. 【例题 6-14 UVA-816】Abbott's Revenge

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 预处理出某个方向的左边.前边.右边是哪个方向就好了. 然后就是普通的bfs了. hash存到某个点,走到这里的方向的最小距离. df ...

  5. 基于深度学习的人脸识别系统（Caffe+OpenCV+Dlib）【二】人脸预处理

    前言 基于深度学习的人脸识别系统,一共用到了5个开源库:OpenCV(计算机视觉库).Caffe(深度学习库).Dlib(机器学习库).libfacedetection(人脸检测库).cudnn(gp ...

  6. Altium Designer的pcb上添加文字说明

  7. 10.12 android输入系统_InputStage理论

    android应用程序对输入系统的处理分为多个阶段,我们把这些阶段称为InputStage 理论处理流程: (1)activity发给window,如果window不能处理,再由activity处理; ...

  8. 【POJ 1226】Substrings

    [链接]h在这里写链接 [题意] 给你n个字符串. 让你找一个字符串s. 设s'为这个字符串的逆序. 要求s或者s'在每个字符串里都能够找得到. 并且要求s的长度最长. 求出这个最长的串的长度. [题 ...

  9. 各个RFC

    RFC:Request For Comments(RFC),是一系列以编号排定的文件.文件收集了有关互联网相关信息,以及UNIX和互联网社区的软件文件.目前RFC文件是由Internet Societ ...

  10. The behavior of App killed or restored by Android System or by users

    What's the behavior of App killed or restored by Android System or by users? First, user kills the a ...