jquery写的一个tab切换插件
<!--tab切换图集--><style type="text/css">
.tab_nav{
width:100%;
overflow: hidden
}
.tab_nav li {
float: left;
list-style: none;
margin-right: 10px;
cursor: pointer;
padding: 2px 30px 2px 0px!important;
}
.link {
cursor: pointer;
color: #F00
}
.tab_div div {
display: none;
padding: 10px;
}
.tab_div {
text-align: left;
border: 1px #CCC solid;
clear: both;
margin-bottom:10px;
}
.cur {
background: #000;
color: #FFF
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//tab
$("#setTab").setTab();
try {
$('.fancybox').fancybox();
}
catch(ex) {}
});
/*插件代码*/
(function ($) {
$.fn.setTab = function () {
var getTab=$(this),//this指向调用函数的ID
panels = getTab.children("div.tab_div").children("div"),
tabs = getTab.find("li");
return this.each(function(){
$(tabs).click(function(e) {
var index = $.inArray(this, $(this).parent().find("li"));//this指向li
if (panels.eq(index)) {
$(tabs).removeClass("cur");
$(this).addClass("cur");
panels.css("display", "none").eq(index).css("display", "block");
}
});
});
}
})(jQuery);
</script>
<div id="setTab">
<ul class="tab_nav">
<li class="cur">{$article.title}的图集</li>
<li>{$article.title}的视频</li>
<li>{$article.title}的文集</li>
</ul>
<div class="tab_div">
<div style="display: block" class="che">
{$article.teacher_pic}
</div>
<div>{$article.teacher_video}</div>
<div>
{$article.teacher_wenji}
</div>
</div>
</div>
</div>
页:
[1]