课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

选项卡问题：1、cursor属性无法在li中无法显示；2、JS中onclick（）的方法执行不了

来源：10-1 编程挑战

JesteCheung

2016-08-02 22:29


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>选项卡切换</title>

<style type="text/css">

body{margin: 0px;padding: 0px;font: 12px normal "microsoft yahei";}

.top{width: 100px;position: relative;padding-top: 10%;left: 33.33%}

.top ul{width:242px;float: left;list-style: none;text-align: center;border-bottom: 2px saddlebrown solid;padding-top: 0px;display: block;}

.top ul li{ background: #fff;width: 70px;float: left;cursor: pointer;display: inline-block;border: 1px solid #aaa;border-bottom: none; text-align: center;}

.top ul li.on{border-top: 2px solid saddlebrown;border-bottom: 2px solid #fff;}

.con{ position: relative;left: 33.33%;padding-top: 32px;}

.con div{ width: 280px; position: relative; border: 1px solid #336699;border-top:none;line-height: 25px;}

.div1{display: block;}

.div2{display: none;}

.div3{display: none;}

</style>

</head>

<script type="text/javascript">

window.onload=function(){


var otop=document.getElementById('top');

var oli1=document.getElementById('l1');

var oli2=document.getElementById('l2');

var oli3=document.getElementById('l3');

var ocon=document.getElementById('con');

var odiv1=document.getElementById('div1');

var odiv2=document.getElementById('div2');

var odiv3=document.getElementById('div3');


alert(1);

oli1.onclick=function(){

alert(2);

oli1.className="on";

odiv1.style.display="block";

odiv2.style.display="none";

odiv3.style.display="none";

}


oli2.onclick=function(){

oli2.className="on";

odiv2.style.display="block";

odiv1.style.display="none";

odiv3.style.display="none";

}

oli3.onclick=function(){

oli3.className="on";

odiv3.style.display="block";

odiv2.style.display="none";

odiv3.style.display="none";

}

}


</script>

<body>

<div id="top">

<ul>

<li id="l1">房产</li>

<li id="l2">家居</li>

<li id="l3">二手房</li>

</ul>

</div>

<div id="con">

<div id="div1">

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

   200万内购五环三居140万安家东三环<br>北京首现零首付楼盘53万购东5环50平<br>京楼盘直降5000 中信府 公园楼王现房<br>

</div>

<div id="div2">

 40平出租屋大改造美少女的混搭小窝<br>经典清新简欧爱家90平老房焕发新生<br>

 新中式的酷色温情66平撞色活泼家居<br>瓷砖就像选好老婆 卫生间烟道的设计<br>

</div>

<div id="div3">

通州豪华3居260万二环稀缺2居250w甩<br>西3环通透2居290万130万2居限量抢购<br>

黄城根小学学区仅260万121平70万抛!<br>独家别墅280万 苏州桥2居优惠价248万<br>

</div>

</div>

</body>

</html>


写回答 关注

1回答

  • 水里有条鱼
    2016-08-02 23:48:08

    先给出以下建议吧，css还有很多修改的地方。

    1.   #对应id  .对应class ，所以请用#，例 #top

    2. 颜色也是，请用 #，例#ccc

    0 0

JavaScript进阶篇

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

468788 学习 · 22582 问题

查看课程

相似问题

无法执行执行clearTimeout？

回答 1

显示问题，无法输出

回答 4

indexof方法属性问题

回答 4

为什么以下几种方法添加onclick属性都不行？

回答 2

请问为什么选项卡无法切换~检查了好久

回答 1

打开慕课网App查看更多内容