jquery版列表切换功能
<!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版列表切换功能的更多相关文章
- js、jquery实现列表模糊搜索功能
实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 2. 可以点击某一项进行选中列表项 3. 可以按下上.下.回车键来控制列表项 4. 按下回车键 ...
- jquery版tab切换效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- html+css+jQuery+JavaScript实现tab自动切换功能
tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- jquery双向列表选择器select版
这个是select版的,若想美化某些样式是不支持得,可以用div模拟版的,功能基本实现能用了,需要其他功能自己加上. div模拟版链接:http://www.cnblogs.com/tie123abc ...
- 为JQuery EasyUI 表单组件增加“焦点切换”功能
1.背景说明 在使用 JQuery EasyUI 各表单组件时,实际客户端页面元素是由 JQuery EasyUI 生成的,元素的焦点切换,虽然 Tab 键可以正常用,但顺序控制属性 tabinde ...
- java在线聊天项目1.3版 ——设计好友列表框功能
设计好友列表框功能,思路—— 1.当客户端成功登陆后,则客户端把成功登陆信息发送给服务端, 2.由服务端将接收到来自各个成功登陆的客户端的用户信息添加进好友列表, 3.每当有成功登陆的用户就向各个客户 ...
- 原生JS和jQuery版实现文件上传功能
<!doctype html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
- 使用jQuery+css实现选项卡切换功能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- 原生JS版和jQuery 版实现文件上传功能
<!doctype html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
随机推荐
- Python3+Selenium3+webdriver学习笔记6（多窗口切换处理）
#!/usr/bin/env python# -*- coding:utf-8 -*- from selenium import webdriverfrom selenium.webdriver.co ...
- js进阶之闭包
1.首先说下什么是闭包,闭:封闭,包:就像我们的包包~:虽然我在扯淡但是也有其道理咯,闭包就有点像java里面的封装一样,包属性和方法都封装到对象内部,在外部通过共有的get.set方法获取或者设置其 ...
- 前端面试题总结（三）JavaScript篇
前端面试题总结(三)JavaScript篇 一.谈谈对this的理解? this是一个关键字. this总是指向函数的直接调用者(而非间接调用者). 如果有new关键字,this指向new出来的那个对 ...
- Spark性能调优之道——解决Spark数据倾斜（Data Skew）的N种姿势
原文:http://blog.csdn.net/tanglizhe1105/article/details/51050974 背景 很多使用Spark的朋友很想知道rdd里的元素是怎么存储的,它们占用 ...
- hd - MFM/IDE 硬盘设备
描述 DESCRIPTION hd* 开头的设备是以裸模式(raw mode)访问MFM/IDE类型硬盘的块设备. 第一个IDE驱动控制器上的主盘(主设备号3)是 hda ;从盘是 hdb. 第二个I ...
- SpringMVC-常用的注解
1. RequestParam注解 把请求中的指定名称的参数传递给控制器中的形参赋值 value:请求参数中的名称 require:请求参数中是否必须提供此参数,默认值是true,必须提供 2. Re ...
- xshell5 上传下载命令
借助XShell,使用linux命令sz可以很方便的将服务器上的文件下载到本地,使用rz命令则是把本地文件上传到服务器. yum -y install lrzsz 其中,对于sz和rz的理解与记忆我用 ...
- WINDOWS-API：关于线程CreateThread，_beginthead(_beginthreadex)，AfxBeginThread
[转]windows多线程编程CreateThread,_beginthead(_beginthreadex)和AfxBeginThread的区别 在Windows的多线程编程中,创建线程的函数主要有 ...
- centos Chrony设置服务器集群同步时间
Chrony是一个开源的自由软件,像CentOS 7或基于RHEL 7操作系统,已经是默认服务,默认配置文件在 /etc/chrony.conf 它能保持系统时间与时间服务器(NTP)同步,让时间始终 ...
- FastText算法
转载自: https://www.cnblogs.com/huangyc/p/9768872.html 0. 目录 1. 前言 2. FastText原理 2.1 模型架构 2.2 层次SoftMax ...