<!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. 在sharepoint2013中如使用PowerView

    在sharepoint2013中如使用PowerView 安装前提 Sql sqlserver 2012 sp1 Sharepoint2013 Sql server 2012 sp1 PowerPiv ...

  2. android中的回调请求的个人理解

    Fragment类提供了管理"选项菜单"的回调函数onCreateOptionMenu(Menu,MenuInflater),调用它可以--创建"选项菜单". ...

  3. iOS开发之功能模块--计算高度Demo探究手稿

    本篇记录关于计算文本高度和Label高度的代码,以备后期再探究: 首先是YouXianMing老师的工具类别: NSString+LabelWidthAndHeight.h // // NSStrin ...

  4. sizeof与strlen的区别

    1 sizeof是操作符,而strlen是库函数: 2 sizeof的参数可以为任意变量或类型,而strlen必须以char*做参数,且字符串必须以‘/0’结尾: 3 数组名用作sizeof参数时不会 ...

  5. 用户故事驱动的敏捷开发 – 2. 创建backlog

    本系列的第一篇[用户故事驱动的敏捷开发 – 1. 规划篇]跟大家分享了如何使用用户故事来帮助团队创建需求的过程,在这一篇中,我们来看看如何使用这些用户故事和功能点形成产品backlog.产品backl ...

  6. TortoiseSVN提交提示423 Locked的解决办法

    往svn上提交文件时,文件可能被另一个人占用,这时提交就会报423Locked错误. 此办法是阅读官方文档(TortoiseSVN-1.6.16-zh_CN.pdf) 4.21 锁部分提供的办法: 首 ...

  7. 我们为什么要使用maven,公司推行maven杂谈

    最近在公司内推荐使用maven,推荐一个落后于业内十年的技术,实在没什么好说的,可是没想到遇到了前所未有的阻力,总是听到各种各样的质疑,我就闹不明白了,推行这个东西是为了更规范的管理项目成果,方便大家 ...

  8. Visual Studio 2013 Update 2 RTM 发布

    今天,微软再Visual Studio Blog发布了开放Visual Studio 2013 Update 2 RTM 下载的文章. 原来安装RC版本的同志们可以直接安装,提供在线安装和ISO下载安 ...

  9. hbase伪分布式平台搭建（centos 6.3）

    搭建完<hadoop伪分布式平台>后就开始搭建hbase伪分布式平台了.有了hadoop环境,搭建hbase就变得很容易了. 一.Hbase安装 1.从官网下载最新版本Hbase安装包1. ...

  10. java实现excel模板导出

    一. 准备工作 1. 点击此下载相关开发工具 2. 将poi-3.8.jxls-core-1.0两个jar包放到工程中,并引用 3. 将excel模板runRecord.xls放到RunRecordB ...