通过CSS和jquery实现点击切换两种不同布局列表
1、1. 写好我们要调整布局样式的这部分页面结构。<a id="check" href="###" class="check-1">切换布局</a><!-- 注意这里定义了一个带图标的样式：check-1 ，我们还要在样式表里写它的样式 --><div id="clickChange" class="img-list"> <!-- 注意这里要先定义一个class --><ul> <li><a href="#">我是一个小朋友</a></li> <li><a href="#">我是一个小朋友</a></li> <li><a href="#">我是一个小朋友</a></li> <li><a href="#">我是一个小朋友</a></li> <li><a href="#">我是一个小朋友</a></li></ul></div>
2、2. 为两种布局写两个不一样的css样式。假设，第一种样式定义为 img-list，第二种样式定义为 list。这时候，我们需要在样式表中，先写其中一种样式。比如：/* 先定义一种样式 */.img-list ul li{ width: 200px; height: 200px; background: #ff0; display: block; float: left; margin: 10px; } 写好第一种样式后，我们利用css的元素继承方法，写第二种样式。/* 定义另一种样式 */.list ul li{ width: 400px; height: 100px; background: #f00; display: block; float: left; margin: 10px; }这时候，我们就有了两套样式。<写更复杂的样式在这里意义不大，大家能看出区别就好。>我们需要要给那个切换图标写两个样式：<style>.check-1,.check-2{width:16px;height:16px;background:(check1.gif) center center no-repeat ;}.check-2{background:(check2.gif) center center no-repeat ;}</style>这里写的比较简单暴力，做两个不一样的图标做背景。
3、3. 使用jquery来完成点击切换。我们知道，jQuery可以对样式表的类进行操作：类样式函数addClass() 为元素添加类样式removeClass() 将元素的类样式移坛冰核哧除toggleClass() 样式的切换；有->无，无->有。在这里，我们就使用toggleClass() 函数。<script>$("#check").click(function(){// 定义 id为 check 的a标签的click事件，鼠标点击这个a标签执行这段程序。$("#clickChange").toggleClass("list");// 查找 id为 clickChange的容器，给它增加一个新的class：list。我们原来在页面结构代码里写的 class="img-list"，会变成： class="img-list list"，这时，我们就完成了对页面布局样式的覆盖。 $(".check-1").toggleClass("check-2");// 查找到类名为 check-1的容器，这里是将鼠标点击的a标签class在 “check-1”和“check-2”之间切换。 });</script>到此时，我们就完成了全部代码，可以测试了。----------------重要提醒：别忘了在<head></head>之间，引用jQuery文件，路径自己修改。<script type="text/javascript" src="jQuery.js"></script>---------------
4、4.全部代码如下：<style> /* 先定义一种样式 */.img-list ul li{ width: 200px; height: 200px; background: #ff0; display: block; float: left; margin: 10px; } /* 定义另一种样式 */.list ul li{ width: 400px; height: 100px; background: #f00; display: block; float: left; margin: 10px; } .check-1,.check-2{ width:16px; height:16px; background:(check1.gif) center center no-repeat ; } .check-2{ background:(check2.gif) center center no-repeat ; }</style> <script> $("#check").click(function(){ $("#clickChange").toggleClass("list"); $(".check-1").toggleClass("check-2"); });</script>
5、5.代码运行效果如图：
