很棒的js选项卡切换效果


Posted in Javascript onJuly 15, 2016

本文实例为大家分享了js实现简单的选项卡切换效果的具体代码,供大家参考,具体内容如下

很棒的js选项卡切换效果

js选项卡切换代码:

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
<link rel="stylesheet" type="text/css" href="base.css" media="all"/>
<style type="text/css">
a{color:#a0b3d6;}
.tabs{border:1px solid #a0b3d6;margin:100px;width:300px;}
.tabs-nav a{background:#eaf0fd;line-height:30px;padding:0 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6;float:left;}
.tabs-nav .on{background:white;border-bottom:1px solid white;_position:relative;}
.tabs-content{padding:20px;border-top:1px solid #a0b3d6;margin-top:-1px;}
</style>
</head>
<body>
<div class="tabs" id="tabs">
<h2 class="tabs-nav clearfix">
<a href="javascript:;" class="on">首页</a>
<a href="javascript:;">技术</a>
<a href="javascript:;">生活</a>
<a href="javascript:;">作品</a>
</h2>
<p class="tabs-content">首页首页首页首页首页首页首页首页首页首页</p>
<p class="tabs-content hide">技术技术技术技术技术技术技术技术技术技术</p>
<p class="tabs-content hide">生活生活生活生活生活生活生活生活生活生活</p>
<p class="tabs-content hide">作品作品作品作品作品作品作品作品作品作品</p>
</div>
<br/><br/>
<div class="tabs" id="tabs2">
<h2 class="tabs-nav clearfix">
<a href="javascript:;" class="on">11111</a>
<a href="javascript:;">22222</a>
<a href="javascript:;">33333</a>
</h2>
<p class="tabs-content">11111111111111111111111111111111111</p>
<p class="tabs-content hide">222222222222222222222222222222222222</p>
<p class="tabs-content hide">333333333333333333333333333333333333333</p>
</div>
</body>
</html>
<script type="text/javascript" src="tabs.js"></script>
<script type="text/javascript">
window.onload = function(){
tabs('tabs','click');
tabs('tabs2','mouseover');
}

</script> 
 </body>
</html>

Tabs.js

function tabs(id,trigger){
var tabsBtn = document.getElementById(id).getElementsByTagName('h2')[0].getElementsByTagName('a');
var tabsContent = document.getElementById(id).getElementsByTagName('p');
for(var i = 0,len = tabsBtn.length; i < len; i++){
tabsBtn[i].index = i;
if(trigger == 'click'){
tabsBtn[i].onclick = function(){
clearClass();
this.className = 'on';
showContent(this.index);
}
}else if(trigger == 'mouseover'){
tabsBtn[i].onmouseover = function(){
clearClass();
this.className = 'on';
showContent(this.index);
}
}
}
function showContent(n){
for(var i = 0,len = tabsBtn.length; i < len; i++){
tabsContent[i].className = 'hide';
}
tabsContent[n].className = 'tabs-content';
}
function clearClass(){
for(var i = 0,len = tabsBtn.length; i < len; i++){
tabsBtn[i].className = '';
}
}
}

 base.css

@charset "utf-8";
/*
@名称: base
@功能: 重设浏览器默认样式
*/
/* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */
html {
color:black;
background:white;
}
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin:0;
padding:0;
}
/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea {
font:12px SimSun,tahoma,arial,sans-serif;
}
input,select,textarea {
font-size:100%;
}
/* 去掉各Table cell 的边距并让其边重合 */
table {
border-collapse:collapse;
border-spacing:0;
}
/* IE bug fixed: th 不继承 text-align*/
th {
text-align:inherit;
}
/* 去除默认边框 */
fieldset,img {
border:none;
}
/* ie6 7 8(q) bug 显示为行内表现 */
iframe {
display:block;
}
/* 去掉 firefox 下此元素的边框 */
abbr,acronym {
border:none;
font-variant:normal;
}
/* 一致的 del 样式 */
del {
text-decoration:line-through;
}
address,caption,cite,code,dfn,em,th,var {
font-style:normal;
font-weight:500;
}
/* 去掉列表前的标识, li 会继承 */
ol,ul {
list-style:none;
}
/* 对齐是排版最重要的因素, 别让什么都居中 */
caption,th {
text-align:left;
}
/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:500;
}
q:before,q:after {
content:'';
}
/* 统一上标和下标 */
sub, sup {
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline;
}
sup {
top:-0.5em;
}
sub {
bottom:-0.25em;
}
/* 让链接在 hover 状态下显示下划线 */
a:hover {
text-decoration:underline;
}
/* 默认不显示下划线,保持页面简洁 */
ins,a {
text-decoration:none;
}
/* IE6,7焦点点状线去除 */
a:focus,*:focus {
outline:none;
}
/* 清除浮动 */
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
overflow:hidden;
}
.clearfix {
zoom:1; /* for IE6 IE7 */
}
.clear{
clear:both;
display:block;
overflow:hidden;
height:0;
line-height:0;
font-size:0;
}
/* 设置显示和隐藏, 通常用来与 JS 配合 */
.hide {
display:none !important;
visibility:hidden;
}
.block {
display:block !important;
}
/* 设置内联, 减少浮动带来的bug */
.fl {
float:left;
display:inline;
}
.fr {
float:right;
display:inline;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
轻松5句话解决JavaScript的作用域
Jul 15 #Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 #Javascript
IE下JS保存图片的简单实例
Jul 15 #Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 #Javascript
JavaScript6 let 新语法优势介绍
Jul 15 #Javascript
简单实现轮播图效果的实例
Jul 15 #Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 #Javascript
You might like
COM in PHP (winows only)
2006/10/09 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
linux 下实现python多版本安装实践
2014/11/18 Python
对python中return和print的一些理解
2017/08/18 Python
python2 与python3的print区别小结
2018/01/16 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
python线性插值解析
2020/07/05 Python
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
科级干部考察材料
2014/02/15 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
党委工作总结2015
2015/04/27 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
2016新年晚会开场白
2015/12/03 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
opencv 分类白天与夜景视频的方法
2021/06/05 Python
浅谈MySQL中的六种日志
2022/03/23 MySQL
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers