jquery css 切换,使用CSS和jQuery轻松切换网页显示样式

最近产品中需要加入“一个列表显示样式快速切换”的功能，正好在这篇文章中看到了它的实现方式，感觉很不错。

这篇文章讲述的是如何通过CSS和JQuery来实现在页面上快速切换布局(样式)的功能。这样做的好处是不言而喻的，现在的网页设计都是希望增强与用户的互动性。允许改变页面布局或信息展示方式无疑可以提高用户体验，选择他们喜欢的样式去获取信息。

首先我们看一下最终效果

第一步：创建一个漂亮别致的边框

我们首先通过一个无序列表标签(ul)来设计一个垂直的列表布局，用它来作为我们信息显示的行和列。

HTML

CSS

提示：通过使用不同灰色的边框实现了一个漂亮别致的边框效果

ul.display{float:left;width:756px;margin:0;padding:0;list-style:none;border-top:1px solid #333;border-right:1px solid #333;background:#222;}ul.display li{float:left;width:754px;padding:10px 0;margin:0;border-top:1px solid #111;border-right:1px solid #111;border-bottom:1px solid #333;border-left:1px solid #333;}

第二步：为内容添加样式

在每个列表项中，嵌套一个div作为内容的容器。

HTML

Image Name