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

展示

点击后面图形进行布局方式的切换：  
回到相关文章 >>

代码

CSS代码：
.cl{display:inline-block; width:12px; height:12px; background:#34538b; font-size:0;}
.cl.on{background:#a0b3d6;}.cl.on:hover{background:#486aaa;}
.h{height:2px; width:12px; background:white; position:absolute; margin-top:5px;}
.v{width:2px; height:12px; background:white; position:absolute; margin-left:5px;}
.layout{width:600px; margin:0; padding:0; list-style-type:none;}
.layout li{margin:5px 5px 5px 0; padding:5px; background:#f0f3f9;}
.newview li{width:280px; float:left;}
HTML代码：
<div>点击后面图形进行布局方式的切换：
    <a href="javascript:void(0);" class="cl" id="layoutH">
        <span class="h"></span>
    </a>&nbsp;
    <a href="javascript:void(0);" class="cl on" id="layoutV">
        <span class="h"></span>
        <span class="v"></span>
    </a>
</div>
<ul id="layoutTarget" class="layout">
    <li><strong>1. </strong>我的新浪微博：<a href="//t.sina.com.cn/zhangxinxu">http://t.sina.com.cn/zhangxinxu</a> 欢迎做我的粉丝。</li>
    <li><strong>2. </strong>我的新浪微博：<a href="//t.sina.com.cn/zhangxinxu">http://t.sina.com.cn/zhangxinxu</a> 欢迎做我的粉丝。</li>
    <li><strong>3. </strong>我的新浪微博：<a href="//t.sina.com.cn/zhangxinxu">http://t.sina.com.cn/zhangxinxu</a> 欢迎做我的粉丝。</li>
    <li><strong>4. </strong>我的新浪微博：<a href="//t.sina.com.cn/zhangxinxu">http://t.sina.com.cn/zhangxinxu</a> 欢迎做我的粉丝。</li>
</ul>
JS代码：
var obj = {
    t: document.getElementById("layoutTarget"),
    h: document.getElementById("layoutH"),
    v: document.getElementById("layoutV")
};
obj.h.onclick = function(){
    //判断当前布局
    if(this.className === "cl on"){
        //当前非此布局，进行切换
        obj.t.className = "layout";
        this.className = "cl";
        obj.v.className = "cl on";
    }
    return false;
};
obj.v.onclick = function(){
    //判断当前布局
    if(this.className === "cl on"){
        //当前非此布局，进行切换
        obj.t.className = "layout newview";
        this.className = "cl";
        obj.h.className = "cl on";
    }
    return false;
};