<!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实现选项卡切换的更多相关文章

  1. 用js实现选项卡切换效果

    这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...

  2. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

  3. js实现选项卡切换的三种方式

    前两种主要实现一个选项卡的切换,第三种使用闭包看书,构造函数实现多个选项卡的切换: 1.第一种实现实现效果为: 实现代码为: <!doctype html> <!DOCTYPE ht ...

  4. JS实现选项卡切换效果

    1.在网页制作过程中,我们经常会用到选项卡切换效果,它能够让我们的网页在交互和布局上都能得到提升 原理:在布局好选项卡的HTML结构后,我们可以看的出来,选项卡实际上是三个选项卡标头和三个对应的版块, ...

  5. js实现选项卡切换的效果

    效果图: css 代码: <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} .demo ...

  6. （效果三）js实现选项卡切换

    开发了很久的小程序,在接到一个h5移动端页面的时候,很多原生的东西都忘了,虽然说我们随着工作经验的增加,处理业务逻辑的能力在提高,但是基础的东西如果长时间不用,也会逐渐忘记.所以以后会经常总结原生的一 ...

  7. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  8. js实现选项卡

    通过JavaScript实现如上选项卡切换的效果. 实现思路: 一.HTML页面布局 选项卡标题使用ul..li 选项卡内容使用div 二.CSS样式制作 整个选项卡的样式设置 选项卡标题的样式设置 ...

  9. 7、JavaScript总结——实现选项卡切换的效果

    编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居    200万内购五环三居 140万安家东三环 ...

随机推荐

  1. 数据库中字段的数据类型与JAVA中数据类型的对应关系

    类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述             VARCHAR L+N VARCHAR java.lang.String 12   CHAR N ...

  2. dubbox消费者启动成功，却无法连接注册中心

    使用dubbox作为服务提供端很好实现,因为git的说明和网上有很多的例子可供参考,但是消费端都一笔带过,简单得很,初学者往往以为只要配置如下3样东西就够了: <?xml version=&qu ...

  3. VC++ MFC SQL ADO数据库访问技术使用的基本步骤及方法

    1.首先,要用#import语句来引用支持ADO的组件类型库(*.tlb),其中类型库可以作为可执行程序 (DLL.EXE等)的一部分被定位在其自身程序中的附属资源里,如:被定位在msado15.dl ...

  4. 【转】用Jmeter进行接口压力测试的步骤

    1.双击jmeter.bat 2.右键点击测试规划à添加àThreadsà线程组,此时在测试规划下边显露出来线程组选项.点击该选项,显露出来线程组界面.参变量线程数表达若干个烦请,参变量Ramp-Up ...

  5. 杂项-公司：摩根大通百科-un

    ylbtech-杂项-公司:摩根大通百科 摩根大通集团(JPMorgan Chase & Co,NYSE:JPM:),2000年12月由J．P．摩根公司和大通-曼哈顿公司合并而成,是美国主要的 ...

  6. ANSI与Unicode的转换

    最近遇到中文路径访问的问题,又重新学习了一遍ansi与Unicode的知识,博文记录下来以供后续参考. ANSI 编码 ANSI是一种字符代码,为使计算机支持更多语 言,通常使用0x80~0xFF 范 ...

  7. 第14 章 Spring MVC的工作机制与设计模式

    14.1 Spring MVC的总体设计 要使用SPring MVC,只要在web.xml中配置一个DispatcherServlet. 再定义一个dispatcherServlet-servlet. ...

  8. java - 读取,导出 excel文件数据

    首先需下载poi java包,添加至构建路径, 写处理方法: import java.io.FileInputStream;import java.io.FileOutputStream;import ...

  9. 转&nbsp;-ALSA&nbsp;配置

    原文地址:-ALSA 配置">转 -ALSA 配置作者:超级大苹果 alsa 音频路径的问题: 在sound/soc/codecs目录中有很多音频codec的codec驱动,我使用的是 ...

  10. SSH免密登陆配置过程和原理解析

    SSH免密登陆配置过程和原理解析 SSH免密登陆配置过很多次,但是对它的认识只限于配置,对它认证的过程和基本的原理并没有什么认识,最近又看了一下,这里对学习的结果进行记录. 提纲: 1.SSH免密登陆 ...