<!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. yarn  workspace 开发示例

    此为官方示例: package.json { "private": true, "workspaces": [ "workspace-a", ...

  2. JMeter使用经历

    JMeter是Apache大树下的又一个果实,是一个压力测试工具,因为使用方便又开源免费,也被用来做功能测试.项目里也是拿JMeter来做功能性的接口自动化测试.这里大概说明下怎么用. 首先还是先下载 ...

  3. find 使用指南

    find 使用方法整理 -name  按照文件名查找文件. -perm  按照文件权限来查找文件. -user  按照文件属主来查找文件. -group  按照文件所属的组来查找文件. - n表示文件 ...

  4. java代码多线程实现如下

    总结:我的比赛得了最差的奖,老师提都没提,所以,我应该有自知之明,你并不是他最喜欢的学生 import java.util.Scanner; //利用多线程实现输入等待…… public class ...

  5. java排序。。简单的冒泡排序

    总结:一种简单的交换顺序,从数左边开始扫描待排序的元素,在扫描过程中依次对相邻元素进行比较,将较大值后移,每经过一轮排序后,值最大的元素将移到末尾, 此时记下该元素的位置,下一轮排序只需比较到此位置即 ...

  6. easyui tree 加载展开全部节点

    $(function () { $('#tbClientListCont').tree({ checkbox: false, url: '/ashx/Client/tbClientList.ashx? ...

  7. Spring缓存源码剖析：（二）CacheManager

    一.CacheManager总览 如果需要Spring缓存可以正常工作,必须配置一个CacheManager. CacheManager实现类你可以配置Spring-context本身提供的Simpl ...

  8. Python时间日期函数讲解

    所有日期.时间的api都在datetime模块内. 1. 日期输出格式化 datetime => string import datetime now = datetime.datetime.n ...

  9. Android 4 学习（14）：Internet Resources

    参考<Professional Android 4 Development> 使用Internet资源 打开URI String myFeed = getString(R.string.m ...

  10. OSGI 模块化

    推荐教程:https://course.tianmaying.com/osgi-toturial+osgi-concept#15