理解插件,Tab切换插件形式。

原创 2016年05月31日 11:17:18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插件的理解</title>
<style type="text/css" media="screen">
*{margin: 0; padding: 0;background: #655c89;}
.box{ width: 500px;  margin: 50px auto; }
.box ul{list-style: none;}  
.box ul.tab{ width: 100%; height: 45px;}
.box ul.tab li{  margin-right: 1px; height: 100%; float: left; background: #54506b; line-height: 45px; text-align: center; color: #fff; font-size: 20px; }
.box ul li.active{background: #fff; display: block !important; color: #b6c4d5; }
.box ul li.active2{background: red; display: block !important; color: #b6c4d5; }
.box ul.content li{ width: 100%; height: 100%; display: none; padding: 10px; }
</style>
</head>
<body>
<!-- 应用层
分为,1.view 视图层
 2.model
 3.service 服务层  数据接口 暴露接口 -->
<div class="box">
<ul class="tab">
<li>省(直辖市)</li>
<li>市</li>
<li>区</li>
</ul>
<ul class="content">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>


<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">


(function($){
$.fn.userTab = function(options){
var cs = {
fontsize : '20px',
widthli : '140px',
activeClass:'active'
};
var ops = $.extend(cs,options);
var $content = $('.box ul.content li');
$(this).eq(0).addClass(ops.activeClass);
$content.eq(0).addClass(ops.activeClass);
$(this).css({'width':ops.widthli,'font-size':ops.fontsize});
$(this).click(clicktab);
function clicktab(){
var index = $(this).index();
$(this).addClass(ops.activeClass).siblings().removeClass(ops.activeClass);
$content.eq(index).addClass(ops.activeClass).siblings().removeClass(ops.activeClass);
}
  }
 
})(jQuery)
</script>
<script type="text/javascript">
$(function(){
$('ul.tab li').userTab({
fontsize: '16px',
widthli : '120px',
activeClass:'active2'
});
})
</script>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

IE Tab Chrome 插件,切换IE内核

  • 2016年05月11日 23:34
  • 451KB
  • 下载

datatable插件应用于tab切换出现表头错位问题

场景描述:有一个tab切换,共两个页面,每个页面里都有一个table,并且采用了datatable插件。 问题:有一个table在初始化的时候,头部布局混乱。如图: 原因所在:tab切换前,有...

jquery简单的tab切换特效插件jquery-tab demo代码下载

jquery简单的tab切换特效插件jquery-tab demo代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463496178688.htm...

将Eclipse插件发布成为站点形式

  • 2010年07月21日 22:58
  • 898KB
  • 下载

ACE框架整合记录2Tab插件-【完结】

$(function () { //添加                 $("#main-tab").aceaddtab({ title: "页面a", url: "a.aspx" });  ...

jQuery TAB插件

原文地址:jQuery TAB插件 最近的项目用到TAB效果的地方较多,于是自己稍微封装了下,写成了jQuery插件,方便以后使用,顺便重温下jQuery插件的实现机制。 在写插件之前...
  • meikidd
  • meikidd
  • 2012年02月27日 14:52
  • 793
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:理解插件,Tab切换插件形式。
举报原因:
原因补充:

(最多只允许输入30个字)