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

最新推荐文章于 2023-08-07 23:15:35 发布

张大炮丶

最新推荐文章于 2023-08-07 23:15:35 发布

阅读量130

点赞数

分类专栏：理解研究文章标签：插件

本文链接：https://blog.csdn.net/wangyong4721/article/details/51544215

版权

理解研究专栏收录该内容

1 篇文章 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>

<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>