足球游戏_中国足彩网￥体育资讯$

简要咨询 咨询QQ 网站导航 网站搜索 手机站点 联系我们
搜公告
  • 搜公告
  • 搜职位
公众号
事业单位
首 页
足球游戏
事业单位
特岗教师
三支一扶
银行招聘
中国足彩网
选调遴选
学历升学
公 众 号
全站导航
当前位置：首页 > 范文|应用文 > IT技术专栏 > 脚本栏目
js实现简单的可切换选项卡效果
来源：易贤网 阅读：2267 次 日期：2015-04-13 13:46:35
温馨提示：易贤网小编为您整理了“js实现简单的可切换选项卡效果”,方便广大网友查阅！

如图，最简单的纯粹的选项卡

js实现简单的可切换选项卡效果 三联

名单

第一步，当然是先写html代码和css样式

<!DOCTYPE html>

<html>

<head>

<meta charset="gb2312" />

<title>无标题文档</title>

<style>

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;}

</style>

</head>

<body>

<div class="wrap">

<ul id="tab_t">

<li class="act">选择1</li>

<li>选择2</li>

<li>选择3</li>

<li>选择4</li>

</ul>

<div id="tab_c">

<div>内容1</div>

<div class="hide">内容2</div>

<div class="hide">内容3</div>

<div class="hide">内容4</div>

</div>

</div>

</body>

</html>

第二步，实现简单的切换效果

要点1：

abc.document.getElementsByTagName("li")

取得abc下面的所有标签为li的元素，返回的是一个元素集合，有数组的一些属性。

要点2：循环，先循环给li加上onclick事件，再onlink事件点击的时候，再循环让所有选项卡的act样式去掉，所有的内容隐藏。然后让所点击的选项及对应内容显示。

要点3：

1

tab_t_li[i].index = i;

在循环时，给选项卡加一个额外的属性并赋值，以做选项卡和内容的对应。

<!DOCTYPE html>

<html>

<head>

<meta charset="gb2312" />

<title>无标题文档</title>

<style>

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;

}

</style>

<script>

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<len; i++){

tab_t_li[i].index = i;

tab_t_li[i].onclick = function(){

for(i=0; i<len; 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 = '';

}

}

}

</script>

</head>

<body>

<div class="wrap">

<ul id="tab_t">

<li class="act">选择1</li>

<li>选择2</li>

<li>选择3</li>

<li>选择4</li>

</ul>

<div id="tab_c">

<div>内容1</div>

<div class="hide">内容2</div>

<div class="hide">内容3</div>

<div class="hide">内容4</div>

</div>

</div>

</body>

</html>

第三步，写成函数。上面的写法只能一个页面用一个选项卡，如果再加一个的话，就需要复制一份，再改很多变量名。

要点：tab_t_li[i][evt] 因为传值的时候是字符串，如果直接写的话就是tab_t_li[i]."onclick"这样话是执行不了的，tab_t_li["onclick"]这样执行没问题。

好了，现在一个页面上就可以有多个切换了，只需要调用函数的时候，写上相应的id名和标签名，事件名称就可以了

<!DOCTYPE html>

<html>

<head>

<meta charset="gb2312" />

<title>无标题文档</title>

<style>

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;

}

</style>

<script>

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<len; i++){

tab_t_li[i].index = i;

tab_t_li[i][evt] = function(){

for(i=0; i<len; 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 = '';

}

}

}

}

</script>

</head>

<body>

<div class="wrap">

<ul id="tab_t">

<li class="act">选择1</li>

<li>选择2</li>

<li>选择3</li>

<li>选择4</li>

</ul>

<div id="tab_c">

<div>内容1</div>

<div class="hide">内容2</div>

<div class="hide">内容3</div>

<div class="hide">内容4</div>

</div>

</div>

</body>

</html>

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看脚本栏目
【点此处就本文及相关问题在本站进行非正式的简要咨询（便捷快速）】 【点此处查询各地各类考试咨询QQ号码及交流群】
上一篇：js使用DOM操作实现简单留言板的方法
下一篇：js实现星星打分效果的方法
易贤网手机网站地址：js实现简单的可切换选项卡效果
由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！
相关阅读脚本栏目
Bottle框架中的装饰器类和描述符应用详解10月30日
Python探索之SocketServer详解10月30日
Python探索之实现一个简单的HTTP服务器10月30日
python探索之BaseHTTPServer-实现Web服务器介绍10月30日
13个最常用的Python深度学习库介绍10月30日
深入理解Python中的*重复运算符10月30日
python logging日志模块详解10月30日
System表空间不足的报警问题浅析10月22日
Android开发自定义TextView省略号样式的方法10月22日
MySQL 清除表空间碎片的实例详解10月22日
Ubuntu下MySQL安装及配置远程登录教程10月22日
Python 2.x如何设置命令执行的超时时间实例10月22日
windows 64位下redis安装教程10月22日
Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果10月22日
浅谈Node Inspector 代理实现10月22日
java web开发之购物车功能实现示例代码10月22日
Android开发中GridView用法示例10月22日
Django ORM框架的定时任务如何使用详解10月22日
SpringMail使用过程中的报错解决办法10月22日
Android 使用自定义RecyclerView控件实现Gallery效果10月22日
易贤网移动网站
最新信息
2025年普洱市景东县教育体育系统事业单位急需紧缺人才招聘公告
2025年普洱市景东县融媒体中心紧缺人才招聘公告
2024年云南省标准化研究院招聘公告
2024年云南交通职业技术学院招聘高层次人才拟聘用人员公示
2024年西南林业大学招聘拟聘用人员公示（十七）
2024年11月中共瑞丽市委宣传部招聘公告
2024年云南文旅交通发展有限公司（第二次）招聘公告
2025年正元国际矿业有限公司招聘公告
2024年云南民族文化宫讲解员招募公告
2024年中冶地质西南有限公司外部招聘公告
公考类
云南公务员 贵州公务员 四川公务员 广西公务员 各省公务员 国家公务员 选调遴选
招聘类
事业单位 中国足彩网 特岗教师 三支一扶 志 愿 者 银行招聘 国企招聘
各类考试
学历升学 会计考试 职业资格 外语考试 医学考试 工程考试 教师资格
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号：滇ICP备2023014141号-1 足球游戏_中国足彩网￥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证：（云）人服证字（2023）第0102001523号
云南网警备案专用图标
联系电话：0871-65317125（9:00—18:00） 获取招聘考试信息及咨询关注公众号：hfpxwx
咨询QQ：526150442（9:00—18:00）版权所有:易贤网
云南网警报警专用图标