JavaScript的选项卡操作

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>实践题 - 选项卡</title><style type="text/css">/* CSS样式制作 */  *{margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;}ul{list-style-type: none;}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">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>

JavaScript的选项卡操作相关推荐

【JavaScript】DOM 操作元素样式和元素类名
文章目录 [JavaScript]DOM 操作元素样式和元素类名一. 操作元素样式 (1)操作行内元素 1. 获取元素的样式 2. 设置元素的样式 (2) 操作非行内元素和行内元素 1. 获取元素的 ...
[Layui]主页tab选项卡操作(刷新页面，刷新选项卡，关闭，关闭其他，全部关闭)
主页tab选项卡操作(刷新页面,刷新选项卡,关闭,关闭其他,全部关闭) 效果如下: CSS <style>.layui-tab-item {height: 100%;width: 100% ...
setAttribute() 与 getAttribute() 用法剖析及选项卡操作的实例展示，这一篇就够了
Ⅰ.在 MDN 上 setAttribute() 与 getAttribute() 函数的用法解释(很详细): 1.Element.setAttribute(): 其一.摘要: 设置指定元素上的某个属 ...
javascript中的操作元素
操作元素 JavaScript的DOM操作可以改变网页内容,结构和样式,我们可以利用DOM操作元素来改变元素里面的内容.属性等改变元素内容 element.innerText 从起始位置到种植位 ...
Javascript Tip(1) 操作剪贴板
javascript可以轻松操作客户端剪贴板内容,不过只适用IE5以上浏览器 javascript可以使用window.clipboardData对象处理剪贴板内容保存到剪贴板的方法 setData ...
php 命令执行crud_如何使用原始JavaScript执行CRUD操作
php 命令执行crud by Zafar Saleem 通过Zafar Saleem 如何使用原始JavaScript执行CRUD操作 (How to perform CRUD operations ...
通过JavaScript简单的操作DOM（一）
通过JavaScript简单的操作DOM (一)简单的前提概念 1.DOM简介 DOM,文档对象模型.描述了HTML和XML文档结构,然后提供API,来帮助开发人员添加.删除.修改页面的某一部分. ( ...
JavaScript常见集合操作
JavaScript常见集合操作集合的遍历 FOR循环(效率最高) 优点:JavaScript最普遍的for循环,执行效率最高缺点:无法遍历对象 for(let i=0;i<array.le ...
html制作顶部选项卡,html：原生javascript实现选项卡
前言我觉得html中一个比较实用的功能就是选项卡,选择哪一个就显示对应的内容,感觉挺舒适的.用在页面布局上也是不错的选择. 那么选项卡到底是什么的样呢?下面我们来直观的看一下,如下图所示就是一个简单 ...

JavaScript的选项卡操作

JavaScript的选项卡操作相关推荐

最新文章

热门文章