0 Tab Content Framed Tabs with Jquery tools plugins

Tab Content Framed Tabs with Jquery tools plugins


Download

<script type="text/javascript" language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.tools.min.js"></script>
<script>
$(document).ready(function() {
$("ul.tabs").tabs("> .tabcontent", {tabs: 'li'});
});
</script>
<style>
.tabFrameBox {
position:relative;
width:622px;
}
.text .tabFrameBox {
width:100%}

.text .tabFrameBox .tabs,
.tabFrameBox .tabs{
float:left;
margin:0 !important;
padding:0;
text-shadow:#fff 0 2px 1px}

.tabFrameBox .tabs li {
font-family: "HattoriHanzoLight", Calibri, sans-serif;
font-size:18px;
list-style:none;
float:left;
display:block;
text-align:center;
background:url(images/framed_tab_bg_right.gif) right 0 no-repeat;
height:39px;
margin:0 3px -1px 0;
line-height:36px}

.tabFrameBox .tabs li a {
display:block;
float:left;
background:url(images/framed_tab_bg_left.gif) left 0 no-repeat;
padding:0 35px;
height:39px;
color:#000;}

.tabFrameBox .tabs .current {
background:url(images/framed_tab_bg_right.gif) right -39px no-repeat;
height:39px;
margin:0 3px -1px 0;}

.tabFrameBox .tabs .current a {
background:url(images/framed_tab_bg_left.gif) left -39px no-repeat;
color:#fff;
text-shadow:#40434c 0 2px 1px}

.tabFrameBox .tabs .current a span {
background:url(images/framed_tab_arrow.gif) center bottom no-repeat;
display:block;
float:left;
height:39px;}

.tabFrameBox .tabcontent {
clear:both;
background:#fff;
border:1px solid #d6d6d6;
line-height:1.5em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
padding:10px;
}

</style>
<h2>Framed Tabs:</h2>
                     <div class="tabFrameBox">
                         <ul class="tabs">
                               <li><a href="#tabcontent1"><span>Tab 1</span></a></li>
                               <li><a href="#tabcontent2"><span>Tab 2</span></a></li>
                               <li><a href="#tabcontent3"><span>Tab 3</span></a></li>
                         </ul>
      
                         <div class="tabcontent">
                             <div class="inner">
                          
                             <h3>Tab 1 content</h3>
                             <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                             <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                          
                             <div class="clear"></div>
                             </div>
                         </div>
                         <div class="tabcontent">
                             <div class="inner">
                             <h3>Tab 2 content</h3>
                             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                             <div class="clear"></div>
                             </div>
                         </div>
                         <div class="tabcontent">
                             <div class="inner">
      <h3>Tab 3 content</h3>
                             <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                             <div class="clear"></div>
                             </div>
                         </div>
                     </div>