0 0 9 6 - 打造“切换图层”

不二如是 · 发表于 2017-3-26 17:37:19

购买主题 已有 2 人购买 本主题需向作者支付 5 鱼币 才能浏览

dreamdnj · 发表于 2017-3-28 13:35:24

感谢楼主分享

不二如是 · 发表于 2017-3-28 21:01:36

dreamdnj 发表于 2017-3-28 13:35
感谢楼主分享

Ъγ:_小ツ雨oο · 发表于 2017-6-22 19:02:53

好惨《，没加 window.onload 也不报错，整半天......

suweixuan1998 · 发表于 2020-1-18 17:37:14

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鱼C工作室</title>
<style type="text/css">
body{
background: cornflowerblue;
margin: 300px;
font-family: "Adobe Fan Heiti Std";
color: deeppink;
}
#super-page{
/*设置整体外观*/
background: #fff;
width: 666px;
box-shadow: 2px 2px 2px rgba(0,0,0,.3);
}
#change{
background: #1ABC9C;
margin: 0;
padding: 0;
}
#change li{
/*设置列表样式*/
display: inline-block;
list-style: none;
width: 111px;
height: 55px;
line-height: 55px;
text-align: center;
padding-left: 77px;
}
#change li a{
/*修改超链接样式*/
display: block;
color: #fff;
text-decoration: none;
}
#content{
padding: 22px;
}
#change li a.active{
font-family: "Abadi MT Condensed Light";
color: #e02562;
background: #000;
}
</style>
</head>
<body>
<section id="super-page">
<div id="content">
<article id="first">
<p>第一个方法是，好点子应该以人为本。周其仁举了德国数学家莱布尼茨的例子，他当年花了12年，才改进了法国人原来只能做加减法的计算器，变成了可以做加减乘除。为什么莱布尼茨会做这些呢？那个时候德国没有工业化，人力成本非常低，计算对人们来说还是份不用风吹日晒的好工作。但是莱布尼茨却不这么认为，他觉得，重复性的活动不是人应该做的，人应该要去做创造性的工作，这就是我们今天说的“以人为本”的想法。想想看，我们今天很火的机器人、人工智能，最开始也是想要解放人类才研究的。</p>
</article>
<article id="second">
<p>第二个方法是，好点子应该先针对一个问题，然后遵循科学原理，顺藤摸瓜找到解决办法。周其仁提到，他曾经去硅谷考察了二三十家高科技企业，考察过程当中他发现一款电子眼镜就是这么研发出来的。这款电子眼镜想解决的问题就是，帮助盲人“看”世界，当然了这个“看”是加引号的。那它遵循的科学原理是什么呢？科学家发现，人能够看见外界事物，并不是通过眼睛，眼睛只是外部图像的接收器，真正成像是在大脑。盲人的眼睛虽然丧失了功能，外部图像无法接收进来，但是大脑还是能成像的。知道了原理之后，研发者又发现，人的舌头底下是最敏感的，所以他们就通过在盲人的舌头底下夹一个电子传感器，来解决外部图像的接收问题。当然了在这当中，还有无数的细节，但比细节更重要的是你的想法。</p>
</article>
<article id="third">
<p>第三个方法是，好点子是可以“平移”的，一个领域里的好点子，也许能够平移到很多不同的领域里去。举个例子，以色列周围的国家常常处于战争当中，而以色列又是个小国家，所以每天都面临着火箭炮满天飞的情况。于是以色列人发明了反火箭入侵系统，能够把经过的火箭弹打下来，还不造成其他损失。这个发明成功到什么地步呢，过去警报一响，以色列人全部都躲进防空洞。用了这个系统后，警报一响，民众反而抬头拿着手机拍天空，因为他们坚信一定能够打下来。后来这套系统经过改良，做成微型导弹放在血管里打血栓，效果也很好。所以，好的想法特别需要有抽象能力，可以平移到很多不同的领域，举一反三甚至是举一反十。</p>
</article>
</div>
<ul id="change">
<li><a href="#first" id="change-first">第一阶段</a></li>
<li><a href="#second" id="change-second">第二阶段</a></li>
<li><a href="#third" id="change-third">第三阶段</a></li>
</ul>
</section>
<script type="text/javascript">
var js_first=document.getElementById("change-first");
var js_second=document.getElementById("change-second");
var js_third=document.getElementById("change-third");
var first=document.getElementById("first");
var second=document.getElementById("second");
var third=document.getElementById("third");
//设置second和third初始状态不显示
second.style.display = "none";
third.style.display = "none";
//设置change-first初始状态为被点击效果
js_first.className = "active";
js_first.onclick = function(){
hideAll();
first.style.display = "block";
js_first.className = "active";
}
js_second.onclick = function(){
hideAll();
second.style.display = "block";
js_second.className = "active";
}
js_third.onclick = function(){
hideAll();
third.style.display = "block";
js_third.className = "active";
}
function hideAll(){ //将所有内容都设置为隐藏，所有链接的样式类都清除
first.style.display = "none";
second.style.display = "none";
third.style.display = "none";
js_first.className = "";
js_second.className = "";
js_third.className = "";
}
</script>
</body>
</html>

复制代码

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 53857 狗仔卡	发表于 2017-3-26 17:37:19 \| 显示全部楼层 \|阅读模式购买主题已有 2 人购买本主题需向作者支付 5 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 34
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

[庖丁解牛] 0 0 9 6 - 打造“切换图层”

本帖被以下淘专辑推荐: