<!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. Docker---(3)Docker常用命令

    原文:Docker---(3)Docker常用命令 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.net/weixin_3 ...

  2. 【例题 7-4 UVA - 524】Prime Ring Problem

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 预处理出所有的答案. 打表输出. [代码] import java.util.ArrayList; import java.util ...

  3. Java Web学习总结（16）——JSP的九个内置对象

    一.JSP运行原理 每个JSP 页面在第一次被访问时,WEB容器都会把请求交给JSP引擎(即一个Java程序)去处理.JSP引擎先将JSP翻译成一个_jspServlet(实质上也是一个servlet ...

  4. 洛谷 P1205 [USACO1.2]方块转换 Transformations

    P1205 [USACO1.2]方块转换 Transformations 题目描述 一块N x N(1<=N<=10)正方形的黑白瓦片的图案要被转换成新的正方形图案.写一个程序来找出将原始 ...

  5. Spring Profiles example--转载

    原文地址:http://www.mkyong.com/spring/spring-profiles-example/ Spring @Profile allow developers to regis ...

  6. Docker使用Dockerfile创建Centos(tomcat+jdk)镜像

    原文链接:https://blog.csdn.net/qq_37936542/article/details/80824389 Docker构建镜像的方法主要有两种:    (1)使用docker c ...

  7. 【AtCoder Beginner Contest 074 D】Restoring Road Network

    [链接]h在这里写链接 [题意] 给你任意两点之间的最短路. 让你求出原图. 或者输出原图不存在. 输出原图的边长总和的最小值. [题解] floyd算法. 先在原有的矩阵上. 做一遍floyd. 如 ...

  8. 【习题 5-6 UVA-1595】Symmetry

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每一个y坐标的点都找中点. 看看中点是不是都一样就好. [代码] #include <bits/stdc++.h> us ...

  9. [Angular2 Router] Preload lzay loading modules

    From router v3.1.0, we have preloading system with router. PreloadAllModules After the init module l ...

  10. Ubuntu 16.04/16.10安装 KDE Plasma

    KDE目前的最新版本是Plasma 5.7(2016-10).Ubuntu默认的桌面环境是Unity,下面记录怎么在Ubuntu 16.04/16.10上安装KDE. Ubuntu 16.04/16. ...