padding
i am using a jquery tab from this website
http://jqueryui.com/demos/tabs/
for the tabs i am using only 2 images
when the page loads one of the images content will be displayed and when the second image is clicked the content for the second image will appear
however when any of the images is clicked the other image should change
following is my code
<div id="tabs" width: 269px;" >
<ul>
<li><a href="#dress"><span><img src="assets/img/blank-green.gif" /></span></a></li>
<li><a href="#thisstyle"><span><img src="assets/img/about-this-style-grey.gif" />
</span></a></li>
</ul>
<div id="dress" style="height: 250px; width: 269px !important;">
content for tab1
</div> <!-- dress -->
<div id="thisstyle" style="height: 250px; width: 269px !important;">
content for tab2
</div> <!-- thisstyle -->
</div><!-- tabs -->
following is the css code for this jquery tab effect
#tabs{
float: left;
width: 500px;
height: 500px;
}
.ui-tabs {
float: left;
}
.ui-tabs .ui-tabs-nav {
background: url('img/tabsBg.gif') no-repeat;
float: left; width: 500px; height: 36px; margin: 0;
}
.ui-tabs .ui-tabs-nav li {
float: left;
}
.ui-tabs .ui-tabs-nav li a {
float: left; text-decoration: none; padding: 12px 17px 0 17px; height: 24px;
color: #fff;
}
.ui-tabs .ui-tabs-nav li a:hover {
color: #fff;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
/*padding: 12px 17px 0 17px; height: 24px;*/
float: left; outline: 0; color: #93b650; background-color: #555;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
cursor: text;
}
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
display: block; float: left; width: 500px;
}
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -999px;
display: block;
}
i need to change the code
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a{}
so that when any of the 2 images is clicked the other image should be something else
please advice how i can change the code so that i can change the image when any of the 2 images is clicked
thanks
