<!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. jQuery $(document).ready()和JavaScript onload事件

    jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...

  2. SE（homework2）_软件分析

    老师这次课后的作业具有开放性,很容易的我会想到经常用的那些工具软件,MATLAB,envi,ARCGIS等等. Q1:此类软件是什么时候出现的,这些软件是怎么说服你(陌生人)成为它们的用户的?他们的目 ...

  3. SQL SERVER 2005删除维护作业报错：The DELETE statement conflicted with the REFERENCE constraint "FK_subplan_job_id"

    案例环境: 数据库版本: Microsoft SQL Server 2005 (Microsoft SQL Server 2005 - 9.00.5000.00 (X64) ) 案例介绍: 对一个数据 ...

  4. 如何让Log4net日志文件按每月归成一个文件夹，StaticLogFileName参数的用法

    想要让Log4net日志(以下称日志)按每月自动归类为一个文件夹,为此,学习和修改了log4net.config文件.查了资料,重点是以下这些参数:      <param name=" ...

  5. PHP服务缓存优化之ZendOpcache、xcache、eAccelerator

    PHP服务缓存优化原理 Nginx 根据扩展名或者过滤规则将PHP程序请求传递给解析PHP的FCGI,也就是php-fpm进程 缓存操作码(opcode) Opcode,PHP编译后的中间文件,缓存给 ...

  6. 从零自学Hadoop(15)：Hive表操作

    阅读目录 序 创建表 查看表 修改表 删除表 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceL ...

  7. android html.fromHtml 用例

    private String content = "<b>标题</b><br>" + "内容<br>": mCo ...

  8. 【Windows编程】系列第七篇：Menubar的创建和使用

    上一篇我们学习了利用windows API创建工具栏和菜单栏,与上一篇紧密联系的就是菜单栏,菜单栏是一个大多数复杂一些的Windows应用程序不可或缺的部分.比如下图就是Windows自带的记事本的菜 ...

  9. 一种可实时处理 O(1)复杂度图像去雾算法的实现。

    在我博文的一系列的文章,有不少算法都于去雾有关,比如限制对比度自适应直方图均衡化算法原理.实现及效果.局部自适应自动色阶/对比度算法在图像增强上的应用这两个增强算法都有一定的去雾能力,而最直接的就是& ...

  10. 用MonoDevelop开发Linux游戏

    鉴于微软将放弃XNA,MonoGame将是喜欢XNA的朋友们的新选择,他是XNA游戏引擎的开源实现,而且是跨平台的,这意味着你可以用他开发OS.android.windows以及linux应用程序,多 ...