mirror of
https://github.com/JangoSteve/jQuery-EasyTabs.git
synced 2025-12-24 12:13:57 +01:00
54 lines
2.0 KiB
HTML
54 lines
2.0 KiB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
|
|
<head profile="http://gmpg.org/xfn/11">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
|
<title>JQuery EasyTabs Demo – Basic - Alfa Jango Blog</title>
|
|
<script src="../javascripts/jquery-1.4.3.min.js" type="text/javascript"></script>
|
|
<script src="../javascripts/jquery.easytabs.js" type="text/javascript"></script>
|
|
|
|
<style>
|
|
.mpp_table_container ul { margin: 0; padding: 0; }
|
|
.mpp_table_container ul li { display: inline-block; background: #ccc; border: solid 1px; border-bottom: none; }
|
|
.mpp_table_container ul li a { display: block; padding: 5px; outline: none; }
|
|
.mpp_table_container ul li a:hover { text-decoration: underline; }
|
|
.mpp_table_container ul li.active-tab { background: #fff; padding-top: 6px; position: relative; top: 1px; }
|
|
.mpp_table_container ul li a.active-tab { font-weight: bold; }
|
|
.mpp_table_container .panel { border: solid 1px; padding: 0 10px; }
|
|
</style>
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
$('.mpp_table_container').easytabs({
|
|
tabs:'div#mpp_menu ul li',
|
|
tabActiveClass:'active-tab',
|
|
animate:false,
|
|
updateHash: false
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="mpp_table_container_1" class="mpp_table_container">
|
|
|
|
<div id="mpp_menu" style="float:left;">
|
|
<ul id="tabs_1" class="tabs">
|
|
<li class="tab">
|
|
<a href="#tabset_blah_panel_1" id="tab_blah_1" style="font-weight:bold;">Blah 1</a>
|
|
<div class="tab-spacer"></div>
|
|
</li>
|
|
<li class="tab">
|
|
<a href="#data" id="tab_blah_2" style="font-weight:bold;">Blah 2</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<br style="clear: both;" />
|
|
<div class="panel" id="tabset_blah_panel_1">
|
|
Panel 1
|
|
</div>
|
|
<div class="panel" id="data">
|
|
Panel 2
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|