页面布局方式的切换实例页面（二）

展示

代码

CSS代码：

.cl{display:inline-block; width:12px; height:12px; background:#34538b; font-size:0;}
.cl.on{background:#a0b3d6;}.cl.on:hover{background:#486aaa;}
.h{width:12px; background:white; position:absolute;}
.h1{height:8px; margin-top:4px;}
.h2{height:2px; margin-top:4px;}
.h3{height:2px; margin-top:10px;}
.h4{height:2px; margin-top:2px;}
.h5{height:2px; margin-top:6px;}
.h6{height:2px; margin-top:10px;}
.layout{width:600px; margin:0; padding:10px 0 0 25px; list-style-type:decimal;}
.layout li{margin:5px 5px 5px 0; padding:5px; border-bottom:1px dashed #dddddd; list-style-position:outside;}
.layout li small{color:#999999; font-size:12px;}
.layout2 li small,.layout3 li a,.layout3 li small{display:none;}
            

HTML代码：

<div>点击后面图形进行布局方式的切换：
    <a href="javascript:void(0);" class="cl on" id="layoutH1" rel="layout3">
        <span class="h h1"></span>
    </a>&nbsp;
    <a href="javascript:void(0);" class="cl on" id="layoutH2" rel="layout2">
        <span class="h h2"></span>
        <span class="h h3"></span>
    </a>&nbsp;
    <a href="javascript:void(0);" class="cl" id="layoutH3" rel="">
        <span class="h h4"></span>
        <span class="h h5"></span>
        <span class="h h6"></span>
    </a>
</div>
<ol class="layout" id="layoutTarget">
    <li>
        <strong>CSS+JavaScript实现页面不同布局的切换显示<br /></strong>
        <a href="//www.zhangxinxu.com/wordpress/?p=688">http://www.zhangxinxu.com/wordpress/?p=688<br /></a>
        <small>作者：张鑫旭 发布时间：2010-03-24 23:56 浏览：123次 评论：4</small>
    </li>
    <li>
        <strong>CSS+JavaScript实现页面不同布局的切换显示<br /></strong>
        <a href="//www.zhangxinxu.com/wordpress/?p=688">http://www.zhangxinxu.com/wordpress/?p=688<br /></a>
        <small>作者：张鑫旭 发布时间：2010-03-24 23:56 浏览：123次 评论：4</small>
    </li>
    <li>
        <strong>CSS+JavaScript实现页面不同布局的切换显示<br /></strong>
        <a href="//www.zhangxinxu.com/wordpress/?p=688">http://www.zhangxinxu.com/wordpress/?p=688<br /></a>
        <small>作者：张鑫旭 发布时间：2010-03-24 23:56 浏览：123次 评论：4</small>
    </li>
    <li>
        <strong>CSS+JavaScript实现页面不同布局的切换显示<br /></strong>
        <a href="//www.zhangxinxu.com/wordpress/?p=688">http://www.zhangxinxu.com/wordpress/?p=688<br /></a>
        <small>作者：张鑫旭 发布时间：2010-03-24 23:56 浏览：123次 评论：4</small>
    </li>
</ol>
            

JS代码：

var obj = {
    h1: document.getElementById("layoutH1"),
    h2: document.getElementById("layoutH2"),
    h3: document.getElementById("layoutH3"),
    t: document.getElementById("layoutTarget")
};
var fnNewView = function(o){
    o.onclick = function(){
        if(o.className === "cl on"){
            fnObjClassSame();
            this.className = "cl";
            var cl = this.rel;
            obj.t.className = "layout " + cl; 
        }
        return false;
    };
    var fnObjClassSame = function(){
        for(var i=1; i<=3; i+=1){
            obj["h"+i].className = "cl on";	
        }
    };
};
fnNewView(obj.h1);
fnNewView(obj.h2);
fnNewView(obj.h3);