<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.cart{
margin: 0 auto;
}
ul li {
list-style: none;
float:left;
}
ul{
width:30%;
height: 60px;
background-color: #000000;
}
ul li {
text-decoration: none;
line-height: 60px;
cursor: pointer;
color:#FFFFFF;
}
/*ul li:first-child{
background-color: #ff0000;
}*/
.neirong{
width: 30%;
height: 150px;
background-color: #ccc;
overflow: hidden;
}
p{
display: none;
}
p:first-child{
display: block;
}
</style>
<body>
<div class="cart1">
<ul class="ulbox">
<li>选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<div class="neirong">
<p>一，就可以避免数据在浏览器和服务器间不必要地来回orage对象也是不同的cookies会发送到服务器端。不服来战</p>
<p>二，其余两个不会。Microsoft指出InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。，，不服来战</p>
<p>三，sessionStorage和localStorage是HTML5 Web Storage API提供的，可以方便的在web请求之间保存数据。有了本地数据，，不服来战</p>
</div>
</div>
<div class="cart2">
<ul class="ulbox">
<li>选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<div class="neirong">
<p>一，就可以避免数据在浏览器和服务器间不必要地来回orage对象也是不同的cookies会发送到服务器端。不服来战</p>
<p>二，其余两个不会。Microsoft指出InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。，，不服来战</p>
<p>三，sessionStorage和localStorage是HTML5 Web Storage API提供的，可以方便的在web请求之间保存数据。有了本地数据，，不服来战</p>
</div>
</div>
<script type="text/javascript">
//方法一
// $(document).ready(function(){
// $('.ulbox li').eq(0).css({"background":"#ff0000"});
// $(".ulbox li").mouseenter(function(){
// $(this).css({"backgroundColor":"#ff0000"}).siblings().css({"backgroundColor":"#000000"});
// $("p").eq($(this).index()).show().siblings().hide();
// });
// });
//方法二
// $('li').eq(0).css({"background":"#ccc"});
// $("li").mouseenter(function(){
// $(this).css({"background":"#ccc"});
// $("li").not($(this)).css({"background":"#000"})
// idx=$(this).index();
//
// $("p").eq(idx).show();
// $("p").not($("p").eq(idx)).hide();
// })

//方法三，以插件形式封装，可在同个页面中重复使用，实现封装性，有利于网站管理和维护
(function($){
$.fn.tabs=function(opt){
var defaults={
'autoclick':'mouseenter'
}
$.extend(defaults,opt);
return this.each(function(){
var me=$(this);
var libox=me.find('.ulbox li');
libox.eq(0).css({"background":"#ff0000"});
libox.on(defaults.autoclick,show);
function show(){
var li=$(this);
li.css({"backgroundColor":"#ff0000"}).siblings().css({"backgroundColor":"#000000"});
me.find(".neirong p").eq($(this).index()).show().siblings().hide();
}
})
}
})(jQuery);

$(function(){
$('.cart1').tabs({
'autoclick':'mouseover'
});
})
$(function(){
$('.cart2').tabs({
'autoclick':'click'
});
})
</script>
</body>
</html>

面向对象和面向过程的jquery版选项卡的更多相关文章

  1. 面向对象和面向过程的js版选项卡

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  2. 大话JS面向对象之扩展篇 面向对象与面向过程之间的博弈论（OO Vs 过程）------（一个简单的实例引发的沉思）

    一,总体概要 1,笔者浅谈 我是从学习Java编程开始接触OOP(面向对象编程),刚开始使用Java编写程序的时候感觉很别扭(面向对象式编程因为引入了类.对象.实例等概念,非常贴合人类对于世间万物的认 ...

  3. 面向对象与面向过程 $this的注意事项和魔术方法set和get

    一.面向对象与面向过程的区别: 二者都是一种思想,面向对象是相对于面向过程而言的.面向过程,强调的是功能行为.面向对象,将功能封装进对象,强调具备了功能的对象.面向对象更加强调运用人类在日常的思维逻辑 ...

  4. JavaSE——面向对象与面向过程、类与对象、(属性、方法、构造器)等

    一:面向对象与面向过程 二者都是一种思想,面向对象是相对于面向过程而言的. 面向过程: 1.面向过程思想强调的是过程(动作). 2.在面向过程的开发中,其实就是面向着具体的每一个步骤和过程,把每一个步 ...

  5. Java基础知识强化20：面向对象和面向过程的思想对比

    面向对象与面向过程的区别  1. 与面向对象编程思想相比较的,往往是面向过程的编程思想,其实在我来理解,两者并不冲突,原因是面向对象的编程也必须使用面向过程的思维来实现具体的功能,所以我认为,两者的区 ...

  6. python的面向对象和面向过程

    一.面向对象和面向过程的区别: a.面向过程: 1)根据业务逻辑从上到下写代码 2)开发思路是将数据和函数按照执行的逻辑顺序组织在一起 3)分开考虑数据与函数 定义性文字: 面向对象编程(Object ...

  7. 面向对象和面向过程，python中的类class，python中程序的入口——main方法，

    1.程序入口,让main显现出来: print(__name__)#__name___是模块中的隐藏字段,当前模块运行的函数名 if __name__ == __main__ __main__() # ...

  8. PHP面向对象和面向过程

    编程界不论是PHP.Python都有这么两种编程思想,oop面向对象.pop面向过程,这两种在功能上没有多大区别,但是在代码编写上却有很大区别.今天就记录一下面向对象和面向过程的优点.缺点.定义.实现 ...

  9. Day5-1 面向对象和面向过程

    摘要: 类的定义 类的增删改查 对象的增删改查 对象的查找和绑定 面向对象和面向过程的区别: 1.面向过程就像是工厂的流水线,按部就班的有序的工作. 优点:把复杂的问题简单化 缺点:可扩展性差.一个步 ...

随机推荐

  1. entity Framework codefirst Migrations

    一次数据迁移的记录 首先在vs工具里面使用打开程序包管理器控制台 在控制台上面选择程序集为数据访问层 注意配置生成app里面的连接字符串 在控制台输入 Enable-Migrations 会自动生成一 ...

  2. 利用ShareSDK进行第三方登录和分享

    到相应开发者平台注册开发者账号,并添加你要进行分享和使用第三方登录应用的信息. 添加新浪微博应用 注册网址 http://open.weibo.com添加QQ应用 注册网址  http://mobil ...

  3. C语言基于GTK+Libvlc实现的简易视频播放器

    小编心语:现下,各种视频播放软件层出不穷,竞争也越演越烈,不知道大家有木有这个想法,小编有时在想能不能做一款属于自己的视频播放器呢~小编特意去实验楼,整理出了这篇关于如何实现简易视频播放器的博文.简易 ...

  4. 推荐几个精致的web UI框架

    1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. git ...

  5. C#：结构

    1. 简单示例 // 定义结构 public struct Person { public string name; public int age; } class Program { static ...

  6. union和union all用法

    工作中,遇到同事之前写的oracle语句中有一个union all,并且很多地方都用到了.便在网上查了一下用法,以下是自己的理解. union  (联合)将两个或者多个结果集合并. 在使用时,两个结果 ...

  7. Redis学习笔记1-Redis的介绍和认识

    说明:文章内容来自百度百科和redis官方对redis的介绍 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API ...

  8. 微信公众平台开发——微信授权登录（OAuth2.0）

    1.OAuth2.0简介 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户 ...

  9. log4j2 不使用配置文件，动态生成logger对象

    大家平时使用Log4j一般都是在classpath下放置一个log4j的配置文件,比如log4j.xml,里面配置好Appenders和Loggers,但是前一阵想做某需求的时候,想要的效果是每一个任 ...

  10. RedHat6.2搭建FTP服务器

    我的环境: A:Red Hat Enterprise 6.2 IP:192.168.16.12 此机作测试端 B:Red Hat Enterprise 6.2 IP:192.168.16.13 此机做 ...