js实现选项卡切换
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
*{margin:0;padding:0;font:bold 14px "微软雅黑";color:#000000;}
li{list-style:none;
display:inline-block;}
a{
text-decoration:none;
}
#tab-list{width: 275px;height:190px;margin: 20px auto;}
#ul1{border-bottom: 2px solid #8B4513;height: 32px;}
#ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}
#ul1 li:hover{cursor: pointer;}
#ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}
#tab-list div{border: 1px solid #7396B8;border-top: none;}
#tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}
.show{display: block;}
.hide{display: none;}
</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload = function() {
var oUl1 = document.getElementById("ul1");
var aLi = oUl1.getElementsByTagName("li");
var oDiv = document.getElementById("tab-list");
var aDiv = oDiv.getElementsByTagName("div");
for(var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function() {
for(var i = 0; i < aLi.length; i++) {
aLi[i].className = "";
}
this.className = "active";
for(var j = 0; j < aDiv.length; j++) {
aDiv[j].className = "hide";
}
aDiv[this.index].className = "show";
}
}
}
</script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="tab-list">
<ul id="ul1">
<li class="active">房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
<ul>
<li><a href="javascript:;">275万购昌平邻铁三居 总价20万买一居</a></li>
<li><a href="javascript:;">200万内购五环三居 140万安家东三环</a></li>
<li><a href="javascript:;">北京首现零首付楼盘 53万购东5环50平</a></li>
<li><a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a></li>
</ul>
</div>
<div class="hide">
<ul>
<li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窝</a></li>
<li><a href="javascript:;"> 经典清新简欧爱家 90平老房焕发新生</a></li>
<li><a href="javascript:;">新中式的酷色温情 66平撞色活泼家居</a></li>
<li><a href="javascript:;"> 瓷砖就像选好老婆 卫生间烟道的设计</a></li>
</ul>
</div>
<div class="hide">
<ul>
<li><a href="javascript:;">通州豪华3居260万 二环稀缺2居250w甩</a></li>
<li><a href="javascript:;"> 西3环通透2居290万 130万2居限量抢购</a></li>
<li><a href="javascript:;"> 黄城根小学学区仅260万 121平70万抛!</a></li>
<li><a href="javascript:;"> 独家别墅280万 苏州桥2居优惠价248万</a></li>
</ul>
</div>
</div>
</body>
</html>
js实现选项卡切换的更多相关文章
- 用js实现选项卡切换效果
这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...
- 用html+css+js实现选项卡切换效果
文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...
- js实现选项卡切换的三种方式
前两种主要实现一个选项卡的切换,第三种使用闭包看书,构造函数实现多个选项卡的切换: 1.第一种实现实现效果为: 实现代码为: <!doctype html> <!DOCTYPE ht ...
- JS实现选项卡切换效果
1.在网页制作过程中,我们经常会用到选项卡切换效果,它能够让我们的网页在交互和布局上都能得到提升 原理:在布局好选项卡的HTML结构后,我们可以看的出来,选项卡实际上是三个选项卡标头和三个对应的版块, ...
- js实现选项卡切换的效果
效果图: css 代码: <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} .demo ...
- （效果三）js实现选项卡切换
开发了很久的小程序,在接到一个h5移动端页面的时候,很多原生的东西都忘了,虽然说我们随着工作经验的增加,处理业务逻辑的能力在提高,但是基础的东西如果长时间不用,也会逐渐忘记.所以以后会经常总结原生的一 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
- js实现选项卡
通过JavaScript实现如上选项卡切换的效果. 实现思路: 一.HTML页面布局 选项卡标题使用ul..li 选项卡内容使用div 二.CSS样式制作 整个选项卡的样式设置 选项卡标题的样式设置 ...
- 7、JavaScript总结——实现选项卡切换的效果
编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 ...
随机推荐
- 十八、python沉淀之路--生成器
一.生成器 生成器总结:语法上和函数类似:生成器函数和常规函数几乎是一样的.他们都是使用def语句进行定义,差别在于生成器使用yield语句返回一个值,而常规函数使用return语句返回一个值.自动实 ...
- 探秘VB.net中的shared与static
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/huyuyang6688/article/details/28230345 简单了解了一 ...
- bzoj 4032 [HEOI2015]最短不公共子串——后缀自动机
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4032 不是 b 的子串的话就对 b 建后缀自动机,在 a 上枚举从每个位置开始的子串或者找子 ...
- 使用nagios插件 check_mysql_health 过程中遇到的error
使用nagios插件 check_mysql_health 过程中遇到的error 1.如果在运行监控mysql插件的时候遇到了error安装以下依赖包就可以解决: yum install perl- ...
- OPCDAAuto.dll的C#使用方法浅析
上次研究了.Net版本的OPC API dll,这次我采用OPCDAAuto.dll来介绍使用方法.以下为我的源代码,有详细的注释无需我多言.编译平台:VS2008SP1.WINXP.KEPServe ...
- ODBC、OLEDB、ADO、SQL的关系
对于一个刚接触数据库的菜鸟来说(比如我),总是搞不清SQL.ADO.OLE DB.ODBC,大脑中一片混乱,好像懂了,又好像没懂,非常的苦恼,今天下了点功夫研究了一下,贴出来,其中肯定有好多错误,希望 ...
- CAN总线优点
废除传统的站地址编码,代之以对通信数据块进行编码,可以多主方式工作: 采用非破坏性仲裁技术,当两个节点同时向网络上传送数据时,优先级低的节点主动停止数据发送,而优先级高的节点可不受影响继续传输数据,有 ...
- AngularJS：Service
ylbtech-AngularJS:Service 1.返回顶部 1. AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务. 什么是服务? 在 An ...
- 融云rongCloud聊天室的使用
融云提供了两种途径的接口, 一个是app端,一个是服务器端的. app端 1.连接融云,监听消息 rong = api.require('rongCloud2'); rong.init(functio ...
- PHP中的use、命名空间的理解
看.Net中的命名空间和using using Ddd.Core; using Ddd.Core.Caching; using Ddd.Core.Data; using Ddd.Core.Domain ...