Mã html thay thế:
- Code:
<style type='text/css'>
/* Style cho menu tabs */
div.TabView div.Tabs
{
height: 26px; /* chiều cao của tab menu */
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
background-color:#FFFCD9;
text-align: center;
height: 26px;
padding: 3px;
vertical-align: middle;
border: 1px solid #30a1db; /* đường viền quanh tabs menu */
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000080;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #31a1db; /* màu nền tab menu active */
color: #ffffff;
}
/* Style cho phần text nội dung của mỗi tab */
div.TabView div.Pages
{
clear: both;
border: 1px solid #30a1db;
overflow: hidden; /* giá trị là auto nếu muốn hiện scroll bar */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px;
overflow: hidden; /* giá trị là auto nếu muốn hiện scroll bar */
}
</style>
<script src='http://vietwebguide.googlepages.com/tabview.js' type='text/javascript'></script>
<div id="TabView" class="TabView">
<!-- tabs -->
<div style="width: 100%;" class="Tabs">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<!-- nội dung tabs -->
<div style="height:300px; width:100%" class="Pages">
<div class="Page">
HTML nội dung Tab 1
</div>
<div class="Page">
HTML nội dung Tab 2
</div>
<div class="Page">
HTML nội dung Tab 3
</div>
</div>
</div>
<script type="text/javascript">tabview_initialize('TabView');</script>
