编程挑战JavaScript进阶篇（慕课网题目）

编程挑战

现在利用之前我们学过的JavaScript知识，实现选项卡切换的效果。

效果图:

文字素材:

房产：

275万购昌平邻铁三居总价20万买一居
200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平
京楼盘直降5000 中信府公园楼王现房

家居:

40平出租屋大改造美少女的混搭小窝
经典清新简欧爱家 90平老房焕发新生
新中式的酷色温情 66平撞色活泼家居
瓷砖就像选好老婆卫生间烟道的设计

二手房：

通州豪华3居260万二环稀缺2居250w甩
西3环通透2居290万 130万2居限量抢购
黄城根小学学区仅260万 121平70万抛!
独家别墅280万苏州桥2居优惠价248万

我的解答

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JS综合练习-选项卡</title><style type="text/css">/* CSS样式制作 */body, ul, li, a, ol{margin: 0;padding: 0;}a{text-decoration: none;color: #000;}li{list-style: none;}.header{overflow: hidden;width: 350px;}.header li{float: left;margin-left: 10px;text-align: center;line-height: 30px;width: 98px;height: 30px;border: 1px solid #888;border-bottom: none;}.header .active{border-top: 2px solid #8B4513;background-color: #fff;}.header li a{display: block;height: 30px;width: 98px;}#content ul{border: 1px solid #7396B8;border-top: 2px solid #8B4513;padding: 10px;width: 380px;height: 110px;position: relative;top: -2px;z-index: -1;}.notshow{display: none;}</style><script type="text/javascript">// JS实现选项卡切换window.οnlοad=function () {var header = document.getElementById("header");var lilist = header.getElementsByTagName("li");for(var i=0;i<lilist.length;i++){lilist[i].index = i;lilist[i].onclick = function () {var content = document.getElementById("content");var ulist = content.getElementsByTagName("ul");for(var k=0;k<lilist.length;k++){lilist[k].setAttribute("class","");ulist[k].setAttribute("class","notshow");}this.setAttribute("class","active");ulist[this.index].setAttribute("class","");}}}</script></head>
<body>
<!-- HTML页面布局 -->
<ul id="header" class="header"><li class="active"><a href="#">房产</a></li><li><a href="#">家居</a></li><li><a href="#">二手房</a></li>
</ul>
<div id="content"><ul><li>275万购昌平邻铁三居 总价20万买一居</li><li>200万内购五环三居 140万安家东三环</li><li>北京首现零首付楼盘 53万购东5环50平</li><li>京楼盘直降5000 中信府 公园楼王现房</li></ul><ul class="notshow"><li>40平出租屋大改造 美少女的混搭小窝</li><li>经典清新简欧爱家 90平老房焕发新生</li><li>新中式的酷色温情 66平撞色活泼家居</li><li>瓷砖就像选好老婆 卫生间烟道的设计</li></ul><ul class="notshow"><li>通州豪华3居260万 二环稀缺2居250w甩</li><li>西3环通透2居290万 130万2居限量抢购</li><li>黄城根小学学区仅260万 121平70万抛!</li><li>独家别墅280万 苏州桥2居优惠价248万</li></ul>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/sunxirui00/p/7505307.html

编程挑战JavaScript进阶篇（慕课网题目）相关推荐

JavaScript进阶篇(慕课网)
<h5>第1章系好安全带,准备启航 </h5> <b>1.1让你认识JS</b> 1.1.1 JavaScript能做什么? 增强页面动态效果(如:下 ...
JavaScript 进阶篇的学习~
---恢复内容开始--- 让你认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面, ...
JavaScript—进阶篇
JavaScript-进阶(笔记) 第1章系好安全带,准备启航 1-1 让你认识JS 第二章你要懂的规则(JS基础语法) 2-1 什么是变量 2-2 给变量取个名字(变量命名) 2-3 确定你的存 ...
javascript 进阶篇（集合）
目录第一章系好安全带,准备启航 1-1 让你认识JS 任务 1-2 编程练习任务第二章你要懂的规则(JS基础语法) 2-1 什么是变量 2-3 确定你的存在(变量声明) 任务 2-4 多样化 ...
前端之JavaScript进阶篇
提示:继前面的JavaScript入门篇,来一个提高. 文章目录前言一.JS基础语法 1.变量 1.1.什么是变量 1.2.变量命名 1.3.变量声明 1.4.变量赋值 2.表达式 3.操作符 3 ...
前端开发-JavaScript进阶篇
神奇的js越来越喜欢它了一.让你认识JS 你知道吗,Web前端师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面, ...
JavaScript进阶篇①——基础语法
一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...
6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
JavaScript进阶篇③ — 浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

编程挑战JavaScript进阶篇（慕课网题目）

编程挑战

编程挑战JavaScript进阶篇（慕课网题目）相关推荐

最新文章

热门文章