PHP/HTML Source:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>TabStrip Plugin</title>
<link href="raxan/ui/css/master.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]><link rel="stylesheet" href="raxan/ui/css/master.ie.css" type="text/css"><![endif]-->
<link href="raxan/ui/css/default/theme.css" rel="stylesheet" type="text/css" />
<script src="raxan/startup.js" type="text/javascript"></script>
<script type="text/javascript" src="views/scripts/css-tabstrip.js"></script>
<style type="text/css">
/* sample rax-tabstrip theme */
ul.rax-tabstrip.nicetab {
border:none;
background:url("views/images/tab_bg.gif") repeat-x left bottom;
}
ul.rax-tabstrip.nicetab li {
border:none; padding:0 0 0 9px;
background:url("views/images/tab_off.png") no-repeat left top;
}
ul.rax-tabstrip.nicetab a {
color:#765; border:none;
padding:5px 15px 4px 6px;
background:url("views/images/tab_off.png") no-repeat right top;
}
ul.rax-tabstrip.nicetab a:hover { color:#333; }
ul.rax-tabstrip.nicetab .selected-tab {
cursor:default;
background-image:url("views/images/tab_on.png");
}
ul.rax-tabstrip.nicetab .selected-tab a {
color:#333; padding-bottom:5px;
background-image:url("views/images/tab_on.png");
}
</style>
</head>
<body>
<div class="container c30 tpm">
<ul id="tab1" class="rax-tabstrip">
<li><a href="#home">Home</a></li>
<li class="selected-tab"><a href="#news">News</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="css-remote.html#ajax;h2,#ajax-p">Ajax Remote</a></li>
</ul>
<div id="home" class="pad ltb rtb bmb">
<h2 class="bottom">Home Tab (Border added to container)</h2>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer bibendum rutrum nunc. Aliquam erat volutpat. Nam porta. Nunc vulputate, arcu vel dictum sollicitudin, nibh arcu cursus metus, venenatis tempor neque dui ornare lectus. Etiam non eros quis urna tristique convallis. Donec lacinia turpis ac quam. Sed quam ante, dictum in, congue placerat, faucibus bibendum, urna. </p>
</div>
<div id="news" class="pad">
<h2 class="bottom">Headline New Tab</h2>
<p>Aenean scelerisque hendrerit leo. Nam mollis mi non turpis. Aliquam nec augue non augue euismod aliquam. Proin auctor ultricies urna. Quisque sollicitudin. Ut consequat varius augue. Etiam orci tellus, cursus vitae, sollicitudin nec, condimentum ut, ante. Mauris sed ipsum a lectus fermentum semper. Donec tempus mi quis lorem. Integer luctus massa. Ut purus nisi, rutrum in, tempor vitae, scelerisque nec, justo. In hac habitasse platea dictumst. Mauris est. Sed molestie. Quisque congue consequat ligula. Suspendisse potenti. Maecenas in velit sed lorem lacinia cursus. Pellentesque vel urna. Morbi eleifend nulla non enim. </p>
</div>
<div id="products" class="pad">
<h2 class="bottom">Product Tab</h2>
<p>Fusce pretium, dui id varius pulvinar, sem diam pellentesque nunc, in venenatis arcu enim ut orci. Suspendisse potenti. Vivamus vitae massa. Fusce tempor, massa vel lobortis auctor, nunc justo ullamcorper orci, nec sollicitudin nibh pede nec dui. Cras rhoncus neque eu nisi. Nam vulputate felis ut erat. Nulla pretium lectus sed quam. Quisque vulputate, metus sit amet semper tincidunt, dolor mauris blandit urna, quis imperdiet ante odio sed urna. Quisque vitae lacus vel risus suscipit dapibus. Maecenas imperdiet tincidunt leo. Aliquam laoreet, massa et volutpat aliquet, orci mauris venenatis quam, sit amet luctus ipsum odio semper odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus pede. Vivamus a ante. </p>
</div>
<div id="about" class="pad">
<h2 class="bottom">About Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent facilisis lectus a lectus lacinia bibendum. Nam eget eros. Pellentesque tincidunt dignissim sapien. Quisque vestibulum tristique justo. Nullam id metus vitae enim dignissim pharetra. Nunc ante est, egestas in, tempus eget, accumsan ac, est. Nam in elit et diam vestibulum malesuada. Sed justo tortor, iaculis at, vestibulum non, convallis et, ante. Sed sapien neque, facilisis in, ultrices eget, molestie ac, tellus.</p>
</div>
<div id="contact" class="pad">
<h2 class="bottom">Contact Tab</h2>
<p>Nulla pretium lectus sed quam. Quisque vulputate, metus sit amet semper tincidunt, dolor mauris blandit urna, quis imperdiet ante odio sed urna. Quisque vitae lacus vel risus suscipit dapibus. Maecenas imperdiet tincidunt leo. Aliquam laoreet, massa et volutpat aliquet, orci mauris venenatis quam, sit amet luctus ipsum odio semper odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus pede. Vivamus a ante. </p>
</div>
<div id="ajax" class="pad">
<h3>Loading...</h3>
</div>
<hr class="space" />
<h2>TabStrip with nicetab theme</h2>
<ul class="rax-tabstrip nicetab">
<li><a href="#home2">Home</a></li>
<li class="selected-tab"><a href="#news2">News</a></li>
<li><a href="#products2">Products</a></li>
<li><a href="#about2">About</a></li>
<li><a href="#contact2">Contact</a></li>
</ul>
<div id="home2" class="pad">
<h2 class="bottom">Home Tab</h2>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer bibendum rutrum nunc. Aliquam erat volutpat. Nam porta. Nunc vulputate, arcu vel dictum sollicitudin, nibh arcu cursus metus, venenatis tempor neque dui ornare lectus. Etiam non eros quis urna tristique convallis. Donec lacinia turpis ac quam. Sed quam ante, dictum in, congue placerat, faucibus bibendum, urna. </p>
</div>
<div id="news2" class="pad">
<h2 class="bottom">Tabs with nicetab theme</h2>
<p>Aenean scelerisque hendrerit leo. Nam mollis mi non turpis. Aliquam nec augue non augue euismod aliquam. Proin auctor ultricies urna. Quisque sollicitudin. Ut consequat varius augue. Etiam orci tellus, cursus vitae, sollicitudin nec, condimentum ut, ante. Mauris sed ipsum a lectus fermentum semper. Donec tempus mi quis lorem. Integer luctus massa. Ut purus nisi, rutrum in, tempor vitae, scelerisque nec, justo. In hac habitasse platea dictumst. Mauris est. Sed molestie. Quisque congue consequat ligula. Suspendisse potenti. Maecenas in velit sed lorem lacinia cursus. Pellentesque vel urna. Morbi eleifend nulla non enim. </p>
</div>
<div id="products2" class="pad">
<h2 class="bottom">Product Tab</h2>
<p>Fusce pretium, dui id varius pulvinar, sem diam pellentesque nunc, in venenatis arcu enim ut orci. Suspendisse potenti. Vivamus vitae massa. Fusce tempor, massa vel lobortis auctor, nunc justo ullamcorper orci, nec sollicitudin nibh pede nec dui. Cras rhoncus neque eu nisi. Nam vulputate felis ut erat. Nulla pretium lectus sed quam. Quisque vulputate, metus sit amet semper tincidunt, dolor mauris blandit urna, quis imperdiet ante odio sed urna. Quisque vitae lacus vel risus suscipit dapibus. Maecenas imperdiet tincidunt leo. Aliquam laoreet, massa et volutpat aliquet, orci mauris venenatis quam, sit amet luctus ipsum odio semper odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus pede. Vivamus a ante. </p>
</div>
<div id="about2" class="pad">
<h2 class="bottom">About Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent facilisis lectus a lectus lacinia bibendum. Nam eget eros. Pellentesque tincidunt dignissim sapien. Quisque vestibulum tristique justo. Nullam id metus vitae enim dignissim pharetra. Nunc ante est, egestas in, tempus eget, accumsan ac, est. Nam in elit et diam vestibulum malesuada. Sed justo tortor, iaculis at, vestibulum non, convallis et, ante. Sed sapien neque, facilisis in, ultrices eget, molestie ac, tellus.</p>
</div>
<div id="contact2" class="pad">
<h2 class="bottom">Contact Tab</h2>
<p>Nulla pretium lectus sed quam. Quisque vulputate, metus sit amet semper tincidunt, dolor mauris blandit urna, quis imperdiet ante odio sed urna. Quisque vitae lacus vel risus suscipit dapibus. Maecenas imperdiet tincidunt leo. Aliquam laoreet, massa et volutpat aliquet, orci mauris venenatis quam, sit amet luctus ipsum odio semper odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus pede. Vivamus a ante. </p>
</div>
</div>
</body>
</html>