//通过原生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. [Selenium With C#学习笔记] Lesson-01环境搭建

    Step-1:准备所需的开发环境.浏览器驱动.Selenium-Webdriver.单元测试框架,因目前使用C#的开发神器都Visual Studio,本文也打算采用Visual Studio 201 ...

  2. iOS上传代码到Github平台

    对于开发人员来说,很多时候想把自己好的代码 demo放到一个公共平台,与大家交流,Github就是一个不错的平台,下面给大家说说Github的具体使用方法. 第一步.申请Github账号.https: ...

  3. iOS使用StroryBoard页面跳转及传值

    之前在网上iOS的页面跳转大多都是按回以前的那种xib的形式,但鄙人是使用storyboard的.这篇就只介绍利用storyboard进行页面跳转与传值. 新建页面 iOS的程序也是使用了MVC的思想 ...

  4. 服务器 'XXXXXX' 上的 MSDTC 不可用。解决方法

    今天在C#中操作数据库的时候突然发现这个问题:服务器 'USER-XXX' 上的 MSDTC 不可用. 解决方法: 在windows控制面板 --> 管理工具 --> 服务 --> ...

  5. Java设计模式之《职责链模式》及应用场景

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6530089.html 职责链模式(称责任链模式)将请求的处理对象像一条长链一般组合起来,形 ...

  6. 关于PHP单双引号解析变量的问题

    双引号可以解析变量,单引号不行 $qweqwe = 123; echo "$qweqwe"; 输出123 echo '$qweqqwe'; 输出$qweqwe

  7. 使用python landport库快速实现排行榜

    背景介绍 排行榜业务使用的频率实在太高了,各种活动都会使用排行榜.经过多次开发后我觉得实现一个简单的排行榜库,它能够完成当前我遇到的所有业务逻辑问题,也希望能够帮助到想要快速开发排行榜业务的同行. 我 ...

  8. 卸载php+apache+mysql

    一.卸载删除 mysql   1 sudo apt-get autoremove --purge mysql-server-5.0 2 sudo apt-get remove mysql-server ...

  9. 通过hue提交oozie定时任务

    Oozie是什么? Oozie是一种Java Web应用程序,它运行在Java servlet容器——即Tomcat——中,并使用数据库来存储以下内容: 工作流定义 当前运行的工作流实例,包括实例的状 ...

  10. 使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式

    text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...