tab栏切换效 简易效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 400px;
border: 1px solid #000;
margin: 100px auto;
overflow: hidden;
}
ul {
list-style: none;
width: 600px;
margin-left: -1px;
overflow: hidden;
}
li {
width: 100px;
height: 30px;
float: left;
border-left: 1px solid #000;
background-color: purple;
cursor: pointer;
text-align: center;
line-height: 30px;
}
span {
display: block;
width: 500px;
height: 370px;
font: 700 100px/370px "simsun";
text-align: center;
background-color: pink;
} .current {
background-color: yellow;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body> <div class="box">
<ul>
<li>裤子</li>
<li>帽子</li>
<li>鞋子</li>
<li>袜子</li>
<li>领子</li>
</ul>
<span>裤子</span>
<span>帽子</span>
<span>鞋子</span>
<span>袜子</span>
<span>领子</span>
</div> <script> var liArr = document.getElementsByTagName("li");
var spanArr = document.getElementsByTagName("span"); for(var i=0;i<liArr.length;i++){
// liArr[i].index = i;
liArr[i].setAttribute("index",i); liArr[i].onmouseover = function () {
for(var j=0;j<liArr.length;j++){
// liArr[j].className = "";
// spanArr[j].className = "hide";
liArr[j].setAttribute("class","");
spanArr[j].setAttribute("class","hide");
} // this.className = "current";
// spanArr[this.index].className = "show";
this.setAttribute("class","current");
spanArr[this.getAttribute("index")].setAttribute("class","show");
}
} </script> </body>
</html>
tab栏切换效 简易效果的更多相关文章
- ES6面向对象实现tab栏切换效果
面向对象实现tab栏切换效果
- jQuery带有定时器的tab栏切换
现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...
- tab栏切换
最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...
- JS实现 Tab栏切换案例
要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...
- dataTable tab栏切换时错位解决办法
做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...
- tab栏切换制作
tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...
- tab栏切换效果案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- tab栏切换的特殊效果
在实际的开发过程中,我们可能会遇到这种需求,如下图 左边是三个tab栏,右边是显示内容的div,当鼠标滑到坐标的tab上时,给它一个高亮显示,让它对应的内容在右边的div中显示出来,当鼠标移出的时候把 ...
- JavaScript实现Tab栏切换
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...
随机推荐
- Symbol.iterator 和 for of
Symbol.iterator 和 for of 是es6的新特性 可以为对象设置 自己的迭代器 首先介绍我们的for of var arr = [1,2,3,8,33] for (var i of ...
- 学习php中的mysql()函数
1.mysql_connect(1,2,3):连接数据库服务器语句,一般常用这三个参数(1)数据库服务器地址,(2)用户名,(3)密码:常与die()(或者exit())函数结合使用:die()函数用 ...
- Azure 项目构建 – 部署 Drupal 网站
通过完整流程详细介绍了如何通过 Azure Web 应用. MySQL DB on Azure 等服务在 Azure 平台上快速搭建 Drupal 服务器,并将其连接到 MySQL 数据库. 此系列的 ...
- JS 操作对象 事件 样式
1.获取标记对象 css 1 - class 2 - id 3 - 标记选择器 js 1 - class 2 - id 3 - 标记 4 - name + document.getElementByI ...
- "xxadmin" user: No protocol specified 错误
1 查看DISPLAY是否设置:env| grep DISPLAY 如未设置则,export DISPLAY=192.168.0.9:0.0 (斜体字修改为自己的服务器的ip) 2 root用户执 ...
- 洛谷 P1926 小书童——刷题大军
题目背景 数学是火,点亮物理的灯:物理是灯,照亮化学的路:化学是路,通向生物的坑:生物是坑,埋葬学理的人. 文言是火,点亮历史宫灯:历史是灯,照亮社会之路:社会是路,通向哲学大坑:哲学是坑,埋葬文科生 ...
- codevs 1606 台阶
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 话说某牛家门外有一台阶,这台阶可能会很高(总层数<=1000000). 这 ...
- 广播接收者 BroadcastReceiver
1. 分为动态注册和静态注册, 静态注册在清单文件里配置即可.动态创建为代码手动添加. 在锁屏广播中, 使用静态创建消息接受不成功, 原因未知. 动态即可. 代码如下: 2. 创建类, 继承与Broa ...
- ucosii(2.89)semaphore 应用要点
semaphore 的作用:1,允许一个任务与其他任务(中断)同步.2,取得共享资源使用权.3,标志事件的发生.
- webpack 使用总结
参考:http://www.ferecord.com/webpack-summary.html#base64 写的比较详细了