这是我的实现方法，欢迎大家提出优化意见~-慕课网

首页课程实战体系课手记专栏慕课教程

这是我的实现方法，欢迎大家提出优化意见~

来源：10-1 编程挑战

杨勤_cd

2018-09-22 00:55

<!DOCTYPE html>

<html>

<head>

ul {

list-style-type: none;

}

li {

overflow: hidden;

}

.title {

width: 60px;

text-align: center;

border: 1px solid blue;

padding: 8px;

cursor: pointer;

float: left;

border-bottom: none;

}

.content {

width: 290px;

padding: 20px;

border: 1px solid black;

}

</style>

// JS实现选项卡切换

function change() {

var title = document.getElementsByClassName("title");

var content = document.getElementsByClassName("content");

var text1 = "";

var text2 = "";

var text3 = "";

for (var i = 0; i < title.length; i++) {

title[i].onclick = function() {

hiddenAll();

var titleText = this.innerHTML;

this.style.backgroundColor="lightblue";

switch (titleText) {

case "房产":

content[0].hidden = null;

break;

case "家居":

content[1].hidden = null;

break;

case "二手房":

content[2].hidden = null;

break;

}

function hiddenAll() {

var content = document.getElementsByClassName("content");

var title = document.getElementsByClassName("title");

for (var i = 0; i < content.length; i++) {

content[i].hidden = "hidden";

title[i].style.backgroundColor="#fff";

}

window.onload = function() {

change();

};

</script>

</head>

<body>

<ul>

<li>

</li>

<li>

275万购昌平邻铁三居总价20万买一居

<br> 200万内购五环三居 140万安家东三环

<br> 北京首现零首付楼盘 53万购东5环50平

<br> 京楼盘直降5000 中信府公园楼王现房

<br>

</div>

40平出租屋大改造美少女的混搭小窝

<br> 经典清新简欧爱家 90平老房焕发新生

<br> 新中式的酷色温情 66平撞色活泼家居

<br> 瓷砖就像选好老婆卫生间烟道的设计

<br>

</div>

通州豪华3居260万二环稀缺2居250w甩

<br> 西3环通透2居290万 130万2居限量抢购

<br> 黄城根小学学区仅260万 121平70万抛!

<br> 独家别墅280万苏州桥2居优惠价248万

<br>

</div>

</li>

</ul>

</body>

</html>

写回答关注

1回答

关叶雯

2018-10-08 17:57:39

挺好的

0 0

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468060 学习 · 21891 问题

查看课程

相似问题

大概就是这样,欢迎大家提出修改(优化)意见。

回答 4

回答 1

回答 1

回答 6

回答 3