<!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. eclipse — Failed to load the JNI shared library”……\jvm.dll问题原因以及解决方案

    首先上一张出现问题的图片: 出现这个问题一般是你的jdk和eclipse不是同一位的,比如你的jdk是32位的但是eclipse下载的是64位的就会导致这种问题. 解决方案:把两者都换为32或者64位 ...

  2. iOS应用中的相关正则及验证

    1.手机号码的验证正则 正则表达式: ^((13[0-9])|(15[^4,\\D])|(18[0,0-9]))\\d{8}$ 详细解释 解释: ^...$: ^:开始 $:结束 中间为要处理的字串 ...

  3. [转]Android应用程序框架思路整理

    一．一般Android应用程序架构(Book,购彩,Market). 普通的应用程序由于只需要用到Android的联网与显示的功能,所以应用程序大体上是呈现为UI(Activities)与网络(Net ...

  4. TabLayout和ViewPager简单实现页卡的滑动

    首先需要在当前的module中的build Gradle的 dependencies中加入以下句子 compile 'com.android.support:design:23.0.1' 因为我们用到 ...

  5. ListView和Adapter的配合使用以及Adapter的重写

    ListView和Adapter的使用   首先介绍一下ListView是Android开发过程中较为常见的组件之一,它将数据以列表的形式展现出来.一般而言,一个ListView由以下三个元素组成: ...

  6. 打开MySQL数据库远程访问的权限

    说明:转自,http://www.cnblogs.com/ycsfwhh/archive/2012/08/07/2626597.html    本人亲测方法1有效,方法2待验证 下载GPL版本安装 M ...

  7. 内嵌iframe

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...

  8. MongoDB学习笔记~大叔分享批量添加—批量更新—批量删除

    回到目录 说它是批量操作,就是说将集合对象一次提交到服务器,并对数据进行持久化,如果您的代码是一次一次的提交,那不算是批量操作!在之前的mongodb仓储中并没有对批量更新和批量删除进行实现,而今天在 ...

  9. Spring事务管理的三种方式

    一 .第一种:全注解声明式事务 Xml代码 复制代码 收藏代码 .<?xml version="1.0" encoding="UTF-8"?> .& ...

  10. 设计模式C#实现（十三）——享元模式（蝇量模式）

    意图 0 适用性 1 结构 2 实现 3 效果 4 参考 5 意图 运用共享技术有效地支持大量细粒度的对象. 适用性 当以下情况都成立时使用: 一个程序使用了大量的对象 完全由于使用大量对象造成很大存 ...