<!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. datetime小练习

    题目: 1.计算你的生日比如近30年来(1990-2019),每年的生日是星期几,统计一下星期几出现的次数比较多2,生日提醒,距离生日还有几天 # !/usr/bin/env python # -*- ...

  2. 【Codeforces Round #447 (Div. 2) A】QAQ

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] C语言程序练习题 [代码] #include <bits/stdc++.h> using namespace std; ...

  3. java 编程思想-java运算符--曾经不太明确的

    1.java 运算符 主要是逻辑运算符和按位运算符;移位运算符-name tecmint.txt 逻辑运算符:And(&&) ; OR(||);Not(!) 按位运算符:And(&am ...

  4. 主定理（Master Theorem）与时间复杂度

    1. 问题 Karatsuba 大整数的快速乘积算法的运行时间(时间复杂度的递推关系式)为 T(n)=O(n)+4⋅T(n/2),求其最终的时间复杂度. 2. 主定理的内容 3. 分析 所以根据主定理 ...

  5. BP神经网络公式推导及实现(MNIST)

    BP神经网络的基础介绍见:http://blog.csdn.net/fengbingchun/article/details/50274471,这里主要以公式推导为主. BP神经网络又称为误差反向传播 ...

  6. JAVA一些基础概念

    Java (计算机编程语言) Java是一门面向对象编程语言,不仅吸收了C++语言的各种长处,还摒弃了C++里难以理解的多继承.指针等概念.因此Java语言具有功能强大和简单易用两个特征. Java语 ...

  7. amazeui学习笔记--js插件（UI增强4）--下拉组件Dropdown

    amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown 一.总结 1.am-dropdown(及其孩子):控制下拉列表的样式 2.data-am-dropdown(及其孩子):控 ...

  8. vue 用 :style动态修改带中划线的样式属性

    今天在项目中遇到要用:style动态设置margin-top值,直接写发现报错.后来改成驼峰就成功了,记录一下 错误示范: <div class="testLeft ulData&qu ...

  9. OC学习篇之---Foundation框架中的NSString对象和NSMutableString对象

    今天在在来继续看一下Foundation框架中的常用对象:NSString和NSMutableString 在OC中NSString对象是不可变的,和Java中的String一样的,而NSMutabl ...

  10. OC学习篇之---协议的概念和用法

    这一篇文章我们在来看一下OC中协议的概念以及用法,协议也是OC中的一个重点,Foundation框架以及我们后面在写代码都会用到. OC中的协议就是相当于Java中的接口(抽象类),只不过OC中的名字 ...