jquery简单切换插件
2015-09-16 23:58
651 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src = "jquery.js"></script> <style> .slider-bar{ overflow: hidden; } li{ width:100px; float: left; height: 50px; text-align: center; line-height: 50px; cursor: pointer; list-style: none; } .slider-cont{ width:100px; height:100px; line-height: 100px; text-align: center; font-size: 20px; } .slider-block{ float:left; display: none; width:100px; height:100px; background:#dd1e2e; } </style> </head> <body> <div class="slider" id ="slider"> <div class="slider-bar"> <ul> <li>first</li> <li>second</li> </ul> </div> <div class="slider-cont"> <div class="slider-block" style="display:block">1</div> <div class="slider-block">2</div> </div> </div> <div class="slider" id="slider"> <div class="slider-bar"> <ul> <li>first</li> <li>second</li> </ul> </div> <div class="slider-cont"> <div class="slider-block" style="display:block">1</div> <div class="slider-block">2</div> </div> </div> </body> </html>
<script> (function($){ $.fn.slider = function(options){ var defaults = { background1:"#ccc", background2:"#ddd" }; var opt = $.extend({},defaults,options); return this.each(function(){ $(this).find("li").bind("click",function(){ var _index = $(this).index(); var _slider = $(this).closest("div").next().find(".slider-block"); _slider.eq(0).css("background",opt.background1) _slider.eq(_index).show().siblings().hide(); }) }) } })(jQuery) $(function(){ $(".slider").slider(); $(".slider").slider(); }) </script>
相关文章推荐
- HTML5,Javascript,and jQuery 24-Hour Trainer(4)——初识CSS
- jQuery插件的简要介绍。
- 对REST架构的理解及Jquery+JSON+RESTful WCF (附源码)
- jquery 无法提交 表单 submit无反映
- jquery文档加载几种写法,图片加载写法
- HTML5,Javascript,and jQuery 24-Hour Trainer(3)——Lists and Tables
- JQuery+ajax+jsonp 跨域访问
- 多个jQuery版本共存的处理方案
- jQuery 操作css
- JQuery源码学习(2.1.1)之 版本结构 ---- day1
- jquery 动画效果函数
- Jquery ajax请求导出Excel表格
- 原生js+JQuery在浏览器之间兼容的坑
- lhgdialog简单弹出框解析
- jQuery时间冒泡
- 讨论下jquery中的重复添加和事件绑定(转)
- jQuery按键事件响应的Demo
- jQuery和javascript获取临近节点方法
- jquery选择器 之 获取父级元素、同级元素、子元素
- 简单的表单验证