Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
72 lines (67 sloc) 1.94 KB
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.semantictabs.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
/*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 5em;
text-decoration:none;
font-weight:bold;
background-color:#e6eeee;
}
ul.semtabs li.active a {
background-color: #4c77b3;
color: #fff;
}
/*end semantic tabs*/
</style>
</head>
<body id="demo">
<div id="mytabset">
<div class="panel">
<h3>Tab1</h3>
Panel stuff 1
</div>
<div class="panel">
<h3>Tab2</h3>
Panel stuff 2
</div>
<div class="panel">
<h3>Tab3</h3>
Panel stuff 3
</div>
</div>
<hr/>
<label for="mash">Mash Button to activate tab2:</label><input type="button" name="mash" value="Change Tab!" id="mash">
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#mytabset").semantictabs({
panel:'.panel', //-- Selector of individual panel body
head:'h3', //-- Selector of element containing panel head
active:':first' //-- Selector of panel to activate by default
});
$('#mash').click(function(){
$("#mytabset").semantictabs({activate:1});
});
});
</script>
</body>
</html>