各位大家好:在下有个问题请教一下,就是我想利用javascript来实现类似msdn技术资源库页面的特效功能(即我点击树节点和右侧数据视图的中间线,页面就只显示右侧的数据视图,我再点击中间线就还原为原始状态)
事实上中间线是一个div,这个div加了个click事件,就这么简单
简单的实现就这样,如下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Language" content="zh-CN"/>
<title></title>
<meta name="Keywords" content="" />
<meta name="Description" content=""/>
<style type="text/css">
#l,#c,#r{height:300px;color:#fff;font-size:50px;font-weight:800;}
#l{width:200px;float:left;background-color:#f00;}
#c{width:20px;float:left;background-color:#000;cursor:pointer;}
#r{margin-left:220px;background-color:#00f;}
</style>
</head>
<body>
<div id="l">fda</div>
<div id="c"> </div>
<div id="r">fdas</div>
<script type="text/javascript">
window.onload = function(){
function $(elname){
return document.getElementById(elname);
};
var c = $("c"),l = $("l"),r = $("r");
c.onclick = function(){
var s = c.getAttribute("___status");
if(s != "_closed"){
l.style.display = "none";
r.style.marginLeft = "20px";
c.setAttribute("___status","_closed");
}else{
l.style.display = "block";
r.style.marginLeft = "220px";
c.setAttribute("___status","_opened");
}
}
}
</script>
</body>
</html>
<body>
<div id="sidebar" class="..."></div>
<div id="line" class="..." onclick="if(document.getElementById('sidebar').style='none') document.getElementById('sidebar').style='block'; if(....) ....;"></div>
<div id="main" class="..."></div>
</body>
永远。。。最简单方法是。。。看见有这样功能的页面,下载后用txt文件打开,或者office打开看看源也可以的。。。。^@^
先看源文件
同意一楼的意见,就是事件中层的隐藏
最好的加密是https
用DIV隐藏吧!
其实就是一个动态操作DOM.