关闭

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

标签: 插件
21人阅读 评论(0) 收藏 举报
分类:
<!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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:23次
    • 积分:10
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档