html选项卡切换代码,js实现简单的可切换选项卡效果
本文实例讲述了js实现简单的可切换选项卡效果的方法。分享给大家供大家参考。具体如下:
如图,最简单的纯粹的选项卡
第一步,当然是先写html代码和css样式
无标题文档
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px;
line-height:24px; margin:0 4px; text-align:center;
border:1px solid #ccc; border-bottom:none;
background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px;
margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc;
border-top:none; padding:20px;}
- 选择1
- 选择2
- 选择3
- 选择4
第二步,实现简单的切换效果
要点1:
abc.document.getElementsByTagName("li")
取得abc下面的所有标签为li的元素,返回的是一个元素集合,有数组的一些属性。
要点2:循环,先循环给li加上onclick事件,再onlink事件点击的时候,再循环让所有选项卡的act样式去掉,所有的内容隐藏。然后让所点击的选项及对应内容显示。
要点3:
tab_t_li[i].index = i;
在循环时,给选项卡加一个额外的属性并赋值,以做选项卡和内容的对应。
无标题文档
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{
height:25px;
border-bottom:1px solid #ccc;
}
#tab_t li{
float:left;
width:80px;
height:24px;
line-height:24px;
margin:0 4px;
text-align:center;
border:1px solid #ccc;
border-bottom:none;
background:#f5f5f5;
cursor:pointer
}
#tab_t .act{
position:relative;
height:25px;
margin-bottom:-1px;
background:#fff;
}
#tab_c{
border:1px solid #ccc;
border-top:none;
padding:20px;
}
window.onload = function(){
var tab_t = document.getElementById("tab_t");
var tab_t_li = tab_t.getElementsByTagName("li");
var tab_c = document.getElementById("tab_c");
var tab_c_li = tab_c.getElementsByTagName("div");
var len = tab_t_li.length;
var i=0;
for(i=0; i
tab_t_li[i].index = i;
tab_t_li[i].onclick = function(){
for(i=0; i
tab_t_li[i].className = '';
tab_c_li[i].className = 'hide';
}
tab_t_li[this.index].className = 'act';
tab_c_li[this.index].className = '';
}
}
}
- 选择1
- 选择2
- 选择3
- 选择4
第三步,写成函数。上面的写法只能一个页面用一个选项卡,如果再加一个的话,就需要复制一份,再改很多变量名。
要点:tab_t_li[i][evt] 因为传值的时候是字符串,如果直接写的话就是tab_t_li[i]."onclick"这样话是执行不了的,tab_t_li["onclick"]这样执行没问题。
好了,现在一个页面上就可以有多个切换了,只需要调用函数的时候,写上相应的id名和标签名,事件名称就可以了
无标题文档
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{
height:25px;
border-bottom:1px solid #ccc;
}
#tab_t li{
float:left;
width:80px;
height:24px;
line-height:24px;
margin:0 4px;
text-align:center;
border:1px solid #ccc;
border-bottom:none;
background:#f5f5f5;
cursor:pointer
}
#tab_t .act{
position:relative;
height:25px;
margin-bottom:-1px;
background:#fff;
}
#tab_c{
border:1px solid #ccc;
border-top:none;
padding:20px;
}
window.onload = function(){
tab("tab_t","li","tab_c","div","onmouseover")
function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
var tab_t = document.getElementById(tab_t);
var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
var tab_c = document.getElementById(tab_c);
var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
var len = tab_t_li.length;
var i=0;
for(i=0; i
tab_t_li[i].index = i;
tab_t_li[i][evt] = function(){
for(i=0; i
tab_t_li[i].className = '';
tab_c_li[i].className = 'hide';
}
tab_t_li[this.index].className = 'act';
tab_c_li[this.index].className = '';
}
}
}
}
- 选择1
- 选择2
- 选择3
- 选择4
希望本文所述对大家的javascript程序设计有所帮助。
html选项卡切换代码,js实现简单的可切换选项卡效果相关推荐
- html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
- html放大镜效果代码,js实现简单放大镜效果
用js实现简单放大镜效果,供大家参考,具体内容如下 此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩,图片的一个区域就会被放大,然后展示在右边.当鼠标移动时右边的大图片也会局部移动.这里的放大 ...
- Angularjs切换网站配色模式简单示例2(切换body元素的class)
一个网站可以有多种配色方案,例如正常模式,夜间模式等. 简单示例一个通过点击toggle 按钮,切换body元素的class,达到切换配色模式的angularjs小app. 1. Live范例可以在以 ...
- html 下拉多选框代码,js实现下拉复选框效果(代码实例)
本章给大家带来用js实现下拉复选框效果(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 先看看效果: 下面我们看看代码: HTML代码: HTML CSS JavaScri ...
- html仿京东选项卡切换代码,js仿京东轮播效果 选项卡套选项卡使用
本文实例为大家分享了js仿京东轮播效果的具体代码,实现选项卡套用选项卡,供大家参考,具体内容如下 效果图: 代码: 无标题文档 *{margin:0;padding:0;} ul{list-style ...
- 一键换肤代码html,js实现简单的网页换肤效果
中心思想:网页换肤的原理就是通过调用不同的样式表文件来实现不同的皮肤切换,并且需要将换好的皮肤计入Cookie中,这样用户已下次访问时,就可以显示用户自定义皮肤了 步骤: 1.在设计HTML代码时,用 ...
- 简单html倒计时器代码,js倒计时简单实现代码
倒计时: 1.设置一个有效的结束日期 2.计算剩余时间 3.将时间转换成可用的格式 4.输出时钟数据作为一个可重用的对象 5.在页面上显示时钟,并在它到达0时停止 html 天 时 分 秒 js代码 ...
- html js注册页面代码,JS一个简单的注册页面实例
// $(function(){ // $("input[name='uname']").blur(function(){ // var unamestr = $(this).va ...
- Angularjs切换网站配色模式简单示例1(切换css文件)
一个网站可以有多种配色方案,例如正常模式,夜间模式等. 简单示例一个通过点击按钮,更换css文件,达到切换配色模式的angularjs 小app. 主要文件有三个:index.html(主文件),wh ...
最新文章
- C++Primer 第一章 快速入门 学习
- 全套CRC校验的算法
- POJ1741 Tree 树中点对统计【树分治入门】
- STL-hasmap源码
- javaScript第五天(2)
- 价格高达万元!苹果将推1TB存储版本的iPhone
- 计算机关键性检测的部件是,试论计算机硬件关键技术的若干问题分析
- javaScript 中的异步编程
- 日亚海淘DHL自助清关流程攻略
- vue项目整合aliplayer阿里云视频
- WinRAR激活去除广告
- 关于导弹飞行控制系统的滚转稳定
- 使用easyos递归删除城通网盘的日志
- xlsxwriter进度条php,PHP_XLSXWriter
- linux学习笔记:06-ubuntu中挂载U盘
- 97-微服务项目的编写(上篇)
- vue中导出excel表格(支持导出图片)
- 移动应用的黑盒测试(1)
- 安卓13开发者模式怎么开?
- 总后台顶部实现站内信功能
热门文章
- 自动统计up主投稿视频时长
- 模拟信号深入讨论4-20mA电流信号的传输距离
- Node的介绍和基本使用(更新ing)
- 【网络爬虫】网络爬虫之入门练习
- 高性价比真无线蓝牙耳机哪款好?520情侣礼物推荐
- 8月9日逆水寒服务器维护时间,【图片】《逆水寒》2019年8月8日更新公告【逆水寒ol吧】_百度贴吧...
- 极客星球 | Android原生SDK无缝嵌入鸿蒙开发“黑科技”
- 移动端苹果浏览器默认滚动条bug处理(橡皮糖现象 ) 亲测有效
- micropython中文教程 嵌入式详细教程_MicroPython中文教程 v2.0 嵌入式详细教程 PDF 完整版...
- 禄劝一中高考成绩查询2021,禄劝彝族苗族自治县第一中学2021年排名