最新消息:

第1款插件:semantictabs.js可以简单地制作Tabs菜单

选项卡 杨红伟 1604浏览 0评论

Semantic Tabs可以简单地制作Tabs菜单
官方链接: http://plugins.jquery.com/semantictabs
JS下载: http://www.ijquery.cn/js/jquery.semantictabs.js
如图:

第1款插件:Semantic Tabs可以简单地制作Tabs菜单

引用代码:

<script type=”text/javascript” charset=”utf-8″ src=”http://www.ijquery.cn/js/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”http://www.ijquery.cn/js/jquery.semantictabs.js”></script>
HTML代码:

<div id=”mytabset”>
<div>
<h3>标签1</h3>
面板1
</div>
<div>
<h3>标签2</h3>
面板2
</div>
<div>
<h3>标签3</h3>
面板3
</div>
</div>

JQuery代码:

<script>
$(function () {
$(‘#mytabset’).semantictabs({
panel:’panel’,    //– Selector of individual panel body
head:’h3′,            //– Selector of element containing panel header
active:’:first’    //– Which panel to activate by default
});
});
</script>

CSS代码:
#mytabset {
width: 100%;
}

.panel {
border: 1px solid #ccc;
}

/*semantic tabs*/
ul.semtabs {
margin: 0 auto;
clear: both;
border-bottom: 4px solid #4c77b3;
height: 25px;
list-style: none !important;
}

ul.semtabs li {
float: left;
height: 30px;
display: block;
margin: 0 !important;
background-image: none;
}

ul.semtabs li a {
/*  height:15px;*/
line-height: 15px;
display:block;
padding: 5px 3em;
text-decoration: none;
font-weight: bold;
background-color: #e6eeee;
}

ul.semtabs li.active a {
background-color: #4c77b3;
color: #fff;
}
/*end semantic tabs*/

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址