//通过原生js实现table切换
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选项卡</title>
<style type="text/css">
.main {width:400px; margin:0 auto;}
#title {height:30px; line-height:30px;}
#title span {float:left; width:120px; height:30px; margin-right:5px; color:#333; background:#eee; text-align:center; cursor:pointer; font-weight:bold;}
#title span.on {background:#333; color:#fff;}
#con {background:#fafafa; height:200px; border-top:2px solid #333;}
#con ul {display:none; padding:10px;}
#con ul.on {display:block;}
#con ul li {height:24px; line-height:24px; border-bottom:1px dotted #ccc; text-indent:10px;}
</style>

</head>
<body>
<div class="wrapper">
<h1>原生javascript效果：选项卡切换</h1>
<div class="main">
<h4 id="title">
<span class="on">jquery</span>
<span>javascript</span>
<span>css</span>
</h4>
<div id="con">
<ul class="on">
<li><a href="#">jquery选项卡</a></li>
<li><a href="#">jquery焦点图</a></li>
<li><a href="#">jquery表单验证</a></li>
<li><a href="#">jquery特效</a></li>
</ul>
<ul>
<li><a href="#">原生javascript</a></li>
<li><a href="#">javascript特效</a></li>
<li><a href="#">javascript笔记</a></li>
</ul>
<ul>
<li><a href="#">css sprites</a></li>
<li><a href="#">css命名规则</a></li>
<li><a href="#">css font属性</a></li>
<li><a href="#">css background属性</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var oTitle = document.getElementById('title');
var aSpan = oTitle.getElementsByTagName('span');
var oCon = document.getElementById('con');
var aUl = oCon.getElementsByTagName('ul');
var i = 0;
for(i=0; i<aSpan.length; i++) {
aSpan[i].index = aUl[i].index = i;
aSpan[i].onclick = function () {
for(i=0; i<aSpan.length; i++) {
aSpan[i].className = '';
aUl[i].className = '';
}
this.className = 'on';
aUl[this.index].className = 'on';
}
}
</script>
</body>
</html>

原生js实现tab切换的更多相关文章

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

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

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

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

  3. 原生js实现tab选项卡

    1.html部分 <body>        <div id="tab">            <div class="tab_menu& ...

  4. JS实现Tab切换

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

  5. Vue.js实现tab切换效果

    利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...

  6. Js 实现tab切换效果

    今天商城系统的后台要添加一个Tab切换的效果,一开始没有思路想要自己去实践这个效果 从网上找jquery 已经有了很好看的案例,实现之后我来学习下思路是如何完成的

  7. js Tab切换实例

    js 实现 tab 切换 实现如下效果: 1.图片每1秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击切换页的选项上时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应 ...

  8. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  9. JavaScript实现Tab切换

    在网页开发中,常常会遇见很多Tab切换,Tab切换增加网页浏览的舒适性,对于开发人员特别常见,本文使用JS实现tab切换效果,仅对学习中遇到的知识点做一个总结. 效果图如下:     实现思路: 1. ...

随机推荐

  1. windows下使用命令行给通过genymotion创建的虚拟机配制IP地址

    1.先用genymotion创建2个虚拟机,GoogleNexus7-1,GoogleNexus7-2. 2.在命令行执行 vBoxManage dhcpserver modify --ifname ...

  2. C++测试利器--google test开源测试框架

    资料 偶然发现了google的测试框架gtest,马上试了下,效果挺不错,特别是对于写c++的人来说,方便很多.以前自己写c++的模块,通常是写好了模块后再另外定义些函数,然后在函数里面写测试用例来测 ...

  3. TCP和UDP的"保护消息边界”

    转自:http://blog.csdn.net/zhangxinrun/article/details/6721427 在socket网络程序中,TCP和UDP分别是面向连接和非面向连接的.因此TCP ...

  4. MongoDB【第一篇】安装

    第一步:准备 1. 操作系统 CentOS-7-x86_64-Everything-1511 2. MongoDB 版本 mongodb-linux-x86_64-rhel70-3.4.2 3. 设置 ...

  5. linux-网络数据包抓取-tcpdump

    用法格式: tcpdump [-i 网卡]  [选项]  '表达式' 选项说明如下: -i:interface 监听的网卡. -nn:表示以ip和port的方式显示来源主机和目的主机,而不是用主机名和 ...

  6. 使用 Bitbucket Pipelines 持续交付托管项目

    简介 Bitbucket Pipelines 是Atlassian公司为Bitbucket Cloud产品添加的一个新功能, 它为托管在Bitbucket上的项目提供了一个良好的持续集成/交付的服务. ...

  7. Laravel控制器和视图

    控制器,rawSQL,Model controller.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request ...

  8. how to use Prolog in C#？ SWI-Prolog

    上个月突然看到Prolog这门语言,它特殊的语法吸引了我,但是经过我一段时间的学习,发现它也不像网络上传说的那样神奇,不过我依然对它很感兴趣,有前辈说Prolog本身并不强大,但是用来作为一门辅助语言 ...

  9. redux-form的学习笔记二--实现表单的同步验证

    (注:这篇博客参考自redux-form的官方英文文档)左转http://redux-form.com/6.5.0/examples/syncValidation/ 在这篇博客里,我将用redux-f ...

  10. 1622: [Usaco2008 Open]Word Power 名字的能量

    1622: [Usaco2008 Open]Word Power 名字的能量 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 370  Solved: 18 ...