<!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. 【Codeforces Round #431 (Div. 2) C】From Y to Y

    [链接]点击打开链接 [题意] 让你构造一个大小最多为10W的字符multiset. 你进行n-1次操作; 每次操作,从set中取出两个字符串,一开始单个字符被认为是字符串. 然后把它们连接在一起. ...

  2. 洛谷—— P1434 滑雪

    https://www.luogu.org/problem/show?pid=1434#sub 题目描述 Michael喜欢滑雪.这并不奇怪,因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜 ...

  3. [D3] Reuse Transitions in D3 v4

    D3 transitions start executing as soon as they’re created, and they’re destroyed once they end. This ...

  4. Redfield Water Ripples 2.02（水波滤镜中文绿色版-支持CC)

    Redfield Water Ripples 能够用于设计具有高度现实主义风格的水波纹特效,它提供了诸多属性选项,其 3D 渲染品质另人映像深刻.此滤镜很易用,其随机设定生成器可创建差点儿无限的水波纹 ...

  5. poj 1191 棋盘切割 （压缩dp+记忆化搜索）

    一,题意: 中文题 二.分析: 主要利用压缩dp与记忆化搜索思想 三,代码: #include <iostream> #include <stdio.h> #include & ...

  6. Loadrunner--关联详解

    当录制脚本时,VuGen会拦截client端(浏览器)与server端(网站服务器)之间的对话,并且通通记录下来,产生脚本.在VuGen的Recording Log中,您可以找到浏览器与服务器之间所有 ...

  7. Linux高性能server编程——系统检測工具

    系统检測工具 tcpdump tcpdump是一款经典的抓包工具,tcpdump给使用者提供了大量的选项,泳衣过滤数据报或者定制输出格式. lsof lsof是一个列出当前系统打开的文件描写叙述符的工 ...

  8. SVN—怎样安装SVNclient软件

            一.怎样安装TortoiseSVN-1.7.12.24070-win32-svn-1.7.9版本号的SVNclient软件:        a.下载TortoiseSVN-1.7.12 ...

  9. 《PHP 5.5从零開始学（视频教学版）》内容简单介绍、文件夹

    <PHP 5.5从零開始学(视频教学版)>当当网购买地址: http://product.dangdang.com/23586810.html <PHP 5.5从零開始学(视频教学版 ...

  10. 在scala中调用java代码

      详细代码请见https://github.com/lujinhong/scalademo 在scala中调用java代替非常非常简单,直接调用即可 (一)一个简单示例 1.创建一个java类 pa ...