tab栏切换效果运用案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
/*上面span部分，背景颜色是天蓝色，下面盒子颜色背景是粉红色，出来第一个盒子，其他盒子都隐藏*/
*{
margin:0;
padding:0;
}
.whole{
width:295px;
height:300px;
margin:100px auto;
}
.shang{
width:100%;
text-align:center;
}
.shang span{
display:inline-block;
background-color:skyblue;
width:70px;
height:30px;
line-height:30px;
}
.xia div{
width:295px;
height:200px;
margin-right:0 5px;
background-color: pink;
display:none;
}
.xia .show{
display:block;
}
.shang .pink{
background-color:pink;
}
</style>
<script>
// js部分，当鼠标划过每一个span时，比如划过新闻时，新闻这个span的背景颜色会变成粉色，其它都还是天蓝色，同时下面新闻板块会显示，其他会隐藏
window.onload=function()
{
var spans=document.getElementById("top").getElementsByTagName("span");
var divs=document.getElementById("bottom").getElementsByTagName("div");
for(var i=0;i<spans.length;i++)
{
spans[i].index=i;
spans[i].onmouseover=function()
{
for(var j=0;j<spans.length;j++)
{
spans[j].className="";
divs[j].className="";
}
this.className="pink";
divs[this.index].className="show";
}
}
}
</script>
</head>
<!--一个大盒子，上面部分是4个span，分别是新闻，体育，娱乐，八卦,下面对应的是具体的内容-->
<body>
<div class="whole" id="whole1">
<div class="shang" id="top">
<span>新闻</span>
<span>体育</span>
<span>娱乐</span>
<span>八卦</span>
</div>
<div class="xia" id="bottom">
<div class="show">新闻板块</div>
<div>体育板块</div>
<div>娱乐板块</div>
<div>八卦板块</div>
</div>
</div>
</body>
tab栏切换效果运用案例的更多相关文章
- ES6面向对象实现tab栏切换效果
面向对象实现tab栏切换效果
- tab栏切换效果案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 实现tab栏切换效果
效果图: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- tab栏切换效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JavaScript--tab栏切换效果
tab栏切换效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- JS实现 Tab栏切换案例
要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...
- jQuery带有定时器的tab栏切换
现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...
- tab栏切换
最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...
- dataTable tab栏切换时错位解决办法
做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...
随机推荐
- jdbcTemplate进行CRUD，查询结果转json
通过Spring的jdbcTemplate作为dao层的框架,将获取到的字段名,及其值,通过put放在jsonObject或jsonArray中,将json返回. public class Sprin ...
- java.sql.SQLException: The server time zone value 'Öùú±ê׼ʱ¼ä' is unrecognized or repr
在数据库连接配置文件中加入以下: 解决办法为在application文件中添加serverTimezone=UTC spring.datasource.url=jdbc:mysql://localho ...
- Vue 中 使用v-show
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- （转）IIS Express介绍与使用
IIS Express是什么?IIS Express是为开发人员优化的轻量级.自包含版本的IIS.IIS Express使使用当前最新版本的IIS来开发和测试网站变得容易.它具有IIS 7及以上的所有 ...
- 后盾网lavarel视频项目---laravel 使用laracasts/flash插件提示信息
后盾网lavarel视频项目---laravel 使用laracasts/flash插件提示信息 一.总结 一句话总结: laracasts/flash插件的效果就是一个弹出的boostrap模块框, ...
- 任泽平：95页PPT分析2018（经济、房价、政策）
任泽平:95页PPT分析2018(经济.房价.政策) 2017-12-07 06:38房价
- MVC的各个部分都有那些技术来实现?如何实现?
MVC是Model-View-Controller的简写. Model 代表的是应用的业务逻辑(通过JavaBean,EJB组件实现), View 是应用的表示面(由JSP页面产生), Control ...
- JS 替换所有的空格
在JS中替换掉输入框内的空格,是在处理表单需求的时候极为常用的一项操作,以防止用户的操作习惯引起数据异常,保证传参的安全性. NO.1 name.replace(" "," ...
- Git-Runoob：Git 分支管理
ylbtech-Git-Runoob:Git 分支管理 1.返回顶部 1. Git 分支管理 几乎每一种版本控制系统都以某种形式支持分支.使用分支意味着你可以从开发主线上分离开来,然后在不影响主线的同 ...
- mac 外接显示屏的坑
概述 工作中使用 Mac 外接显示屏,有时会出现闪屏然后黑屏的现象,之前都没有找到原因,今天终于找到了,记录下来,供以后参考,相信对其他人也有用. 参考资料: Macbook外接显示器设置教程 问题 ...