<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">

*{
margin: 0;
padding: 0;
}

ul{
list-style-type: none;
}

.box{
width: 789px;
height: auto;
margin: 0 auto;
}

.list-box{
margin: 0 auto;
width: 700px;
height: 42px;
border-bottom: 1px solid #eeeeee;
}

.list{
float: right;
padding-top: 10px;
}

.list-box ul li{
cursor: pointer;
width: 30px;
height: 26px;
float: left;
display: block;
background: url("img/listype-icon.png") no-repeat;

}

.changelist .list-1-o{
height: 240px;
width: 240px;
border: 1px solid #aaaaaa;
float: left;
margin-left: 20px;
margin-bottom: 20px;
}
.list-2-v .listimg,.list-2-v .listtext{
float: left;
}
.list-2-v .listimg img{
display: block;
}
.changelist .list-2-v{
height: 170px;
}
</style>
<body>
<div class="box">
<div class="list-box">
<ul class="list">
<li class="list-1" id="list-1" style="background-position: 0px -26px"></li>
<li class="list-2" id="list-2" style="background-position: -30px -26px"></li>
</ul>
</div>
<div>
<ul class="changelist">
<li class="list-1-o">
<div class="lesson-info">
<div class="listimg">
<img src="img/2.jpg" style="width: 240px">
</div>
<div class="listtext">
<span>环境搭建</span>
</div>
</div>
</li>
<li class="list-1-o">
<div class="listimg">
<img src="img/2.jpg" style="width: 240px">
</div>
<div class="listtext">
<span>环境搭建</span>
</div>
</li>
<li class="list-1-o">
<div class="listimg">
<img src="img/2.jpg" style="width: 240px">
</div>
<div class="listtext">
<span>环境搭建</span>
</div>
</li>
<li class="list-1-o">
<div class="listimg">
<img src="img/2.jpg" style="width: 240px">
</div>
<div class="listtext">
<span>环境搭建</span>
</div>
</li>
<li class="list-1-o">
<div class="listimg">
<img src="img/2.jpg" style="width: 240px">
</div>
<div class="listtext">
<span>环境搭建</span>
</div>
</li>
<li class="list-1-o">
<div class="listimg">
<img src="img/2.jpg" style="width: 240px">
</div>
<div class="listtext">
<span>环境搭建</span>
</div>
</li>
</ul>
</div>
</div>

</body>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

/*$(document).ready(function(){
$(".list-1").bind("click",function(){
$(".list-1").css("backgroundPosition","0px -26px");
$(".list-2").css("backgroundPosition","-30px -26px");
$(".changelist").children().removeClass("list-2-v").addClass("list-1-o");

})
$(".list-2").bind("click",function(){
$(".list-1").css("backgroundPosition","0px 0px");
$(".list-2").css("backgroundPosition","-30px 0px")
$(".changelist").children().removeClass("list-1-o").addClass("list-2-v");
})
});*/

;(function($){
$.fn.lists=function(options){
var defaults={

};
$.extend(defaults,options);
return this.each(function(){
var $this=$(this);
$(".list-1").bind("click",function(){
$(".list-1").css("backgroundPosition","0px -26px");
$(".list-2").css("backgroundPosition","-30px -26px");
$this.children().removeClass("list-2-v").addClass("list-1-o");

})
$(".list-2").bind("click",function(){
$(".list-1").css("backgroundPosition","0px 0px");
$(".list-2").css("backgroundPosition","-30px 0px")
$this.children().removeClass("list-1-o").addClass("list-2-v");
})
});
}
})(jQuery);
$(function(){
$('.changelist').lists();
});
</script>
</html>

jquery版列表切换功能的更多相关文章

  1. js、jquery实现列表模糊搜索功能

    实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 2. 可以点击某一项进行选中列表项 3. 可以按下上.下.回车键来控制列表项 4. 按下回车键 ...

  2. jquery版tab切换效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. html+css+jQuery+JavaScript实现tab自动切换功能

    tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  4. jquery双向列表选择器select版

    这个是select版的,若想美化某些样式是不支持得,可以用div模拟版的,功能基本实现能用了,需要其他功能自己加上. div模拟版链接:http://www.cnblogs.com/tie123abc ...

  5. 为JQuery EasyUI 表单组件增加“焦点切换”功能

    1.背景说明 在使用 JQuery  EasyUI 各表单组件时,实际客户端页面元素是由 JQuery EasyUI 生成的,元素的焦点切换,虽然 Tab 键可以正常用,但顺序控制属性 tabinde ...

  6. java在线聊天项目1.3版 ——设计好友列表框功能

    设计好友列表框功能,思路—— 1.当客户端成功登陆后,则客户端把成功登陆信息发送给服务端, 2.由服务端将接收到来自各个成功登陆的客户端的用户信息添加进好友列表, 3.每当有成功登陆的用户就向各个客户 ...

  7. 原生JS和jQuery版实现文件上传功能

    <!doctype html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  8. 使用jQuery+css实现选项卡切换功能

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  9. 原生JS版和jQuery 版实现文件上传功能

    <!doctype html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. 网络文件系统（NFS）的使用

    一.简介 NFS--Network FileSystem,即网络文件系统,主要功能是让网络上的不同操作系统之间共享数据. 远程服务器端共享出文件或目录,然后远羰共享出来的文件或目录就可通过挂 载的方式 ...

  2. Flash图表FusionCharts如何自定义图表导出菜单或界面

    FusionCharts的导出组件界面有两种模式: Compact Mode: 用于保存单张图片,每一个单独的导出组件实例都代表单独的图表.在这种模式下,只有一个按钮和标题是可见的. Full Mod ...

  3. ImageLoader常用方法注释

    ImageLoader中的常用方法及相关作用注释 ImageLoader 的ImageLoaderConfiguration config 配置 ImageLoaderConfiguration co ...

  4. Java 文件操作-File

    1.File文件操作 java.io.File用于表示文件(目录),也就是说程序员可以通过File类在程序中操作硬盘上的文件和目录.File类只用于表示文件(目录)的信息(名称.大小等),不能对文件的 ...

  5. SQL_关联映射

    关联映射:一对多/多对一 存在最普遍的映射关系,简单来讲就如球员与球队的关系: 一对多:从球队角度来说一个球队拥有多个球员 即为一对多 多对一:从球员角度来说多个球员属于一个球队 即为多对一 数据表间 ...

  6. UVA 1153 Keep the Customer Satisfied 顾客是上帝（贪心）

    因为每增加一个订单,时间是会增加的,所以先按截止时间d排序, 这样的话无论是删除一个订单,或者增加订单,都不会影响已经选好的订单. 然后维护一个已经选好的订单的大根堆(优先队列),如果当前无法选择的话 ...

  7. VPS Linux SSH 客户端断开后保持进程继续运行配置方法——screen

    前言 在Linux中,我们经常会做一些关于数据的操作(备份.传输.压缩等)或是要在后台持续的运行一些程序.由于,工作的数据量很大或者工作要持续很长的时间,我们就必须保证这个终端的启动,一旦终端关闭了, ...

  8. 2018.5.7 androidStudio中：layout_gravity 与 gravity的属性的区别

    android:gravity:设置的是控件自身上面的内容位置 android:layout_gravity:设置控件本身相对于父控件的显示位置. 看下面 <LinearLayout xmlns ...

  9. Mac OS X El Capitan系统完整性保护System Integrity Protection (SIP)

    http://blog.csdn.net/yulimin/article/details/49992031 引言:前段时间经历了XCode编译器代码被注入的事件后,这次 Mac OS X El Cap ...

  10. iframe的document操作

    导语: 在我写网页代填插件的时候,有遇到拿不到input元素的时候,这时候我去看元素布局,发现有些网站登录那一块是用iframe标签写的,这时候我需要取到的那就是iframe标签下input元素 1. ...