您的位置：首页 > 其它

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

2013-01-20 03:03 543 查看

Semantic Tabs可以简单地制作Tabs菜单

官方链接： http://plugins.jquery.com/semantictabs

JS下载： http://ijquery.360sites.cn/js/jquery.semantictabs.js

如图：

引用代码:

<script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery-1.3.2.min.js"></script>

<script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery.semantictabs.js"></script>

复制代码
HTML代码：

<div id="mytabset">

<div class="panel">

<h3>标签1</h3>

面板1

</div>

<div class="panel">

<h3>标签2</h3>

面板2

</div>

<div class="panel">

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

复制代码

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=1

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航