0 Tab Content Icons with Jquery tools plugins

Tab Content Icons 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>
.tabBox {
position:relative;
background:url(images/tabs_bg.jpg) left top no-repeat;
width:622px;
}

.text .tabBox {
width:100%}

.tabBox .tabs,
.text .tabBox .tabs{
float:right;
height:42px;
background:url(images/tabs_bg.jpg) right top;
margin:0 !important;
padding:0 8px 0 0;
line-height:40px;}

.tabBox .tabs li {
list-style:none;
float:left;
display:block;
text-align:center;
margin:0;}

.tabBox .tabs li a {
display:block;
width:51px;
height:42px;}

.tabBox .tabs .current {
background:url(images/tabs_active_bg.gif) 0 0 no-repeat}

.tabTitle {
float:left;
line-height:40px;}

.tabTitle h3, .col .tabTitle h3 {
font-size:19px;
color:#222;
text-shadow:#fff 0 1px 1px;
line-height:40px;
padding-left:25px;
font-weight:normal;
margin:0 !important}

.tabBox .tabcontent {
clear:both;
background:#fff;
border:1px solid #d6d6d6;
border-top:none;
line-height:1.5em;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;}

.tabcontent .inner {
padding:15px}

.tabcontent p {
margin-bottom:10px !important}

.tabcontent h3 {
color:#2e88c7;
font-size:19px;
margin:10px 0 10px 0}

.tabcontent img {
border:1px solid #dfdfdf}
</style>
<h2>Tabs Contents Icons:</h2>
                      <div class="tabBox">
                          <div class="tabTitle"><h3>Main Title:</h3></div>
                          <ul class="tabs">
                                <li><a href="#tabcontent1"><img src="images/icon_1.png" width="51" height="42" alt="" /></a></li>
                                <li><a href="#tabcontent2"><img src="images/icon_2.png" width="51" height="42" alt="" /></a></li>
                                <li><a href="#tabcontent3"><img src="images/icon_3.png" width="51" height="42" alt="" /></a></li>
                          </ul>
        
                          <div class="tabcontent">
                              <div class="inner">
                              <img src="images/temp_img_1.jpg" alt="" width="230" height="143" class=" frame_left" />
                              <h3>Tab 1 - Title</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 class="tabcontent">
                              <div class="inner">
                              <h3>Tab 2 - Title</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 class="tabcontent">
                              <div class="inner">
                              <img src="images/temp_img_3.jpg" alt="" width="230" height="143" class="alignright" />
                              <h3>Tab 3 - Title</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>