Eaiser method then what i am doing
I have about 4 div layers and right no wit works when you click on product 1 the div layer comes up when you click on product 2 the div layer comes up. Now is there a easier method to do this without having to write a custom function for each product link.
-
<script src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js"></script>
<style>
img
{
border:none;
}
#rotator {
margin:0;
width:920px;
}
#rotator #product1 {
background:transparent url(images/productpages/img1.jpg) no-repeat top left;
height:350px;
}
#rotator #product2 {
background:transparent url(images/productpages/img2.jpg) no-repeat top left;
height:350px;
}
#rotator #product3 {
background:transparent url(images/productpages/img3.jpg) no-repeat top left;
height:350px;
}
#rotator #product4 {
background:transparent url(images/productpages/img4.jpg) no-repeat top left;
height:350px;
}
#rotator #product5 {
background:transparent url(images/productpages/img1.jpg) no-repeat top left;
height:350px;
}
#rotator #product6 {
background:transparent url(images/productpages/img2.jpg) no-repeat top left;
height:350px;
}
.hideme {
display:none;
}
</style>
</head>
<body>
<div id="rotator">
<!-- Tabs -->
<!-- First Content -->
<div id="product1" class='hideme'> </div>
<!-- Second Content -->
<div id="product2" class='hideme'> </div>
<!-- Third Content -->
<div id="product3" class='hideme'> </div>
<!-- Fourth Content -->
<div id="product4" class='hideme'> </div>
</div>
<script>
$('#product1').fadeIn("slow");
$(document).ready(function(){
$('a#lnkprd1').click(function()
{
$('.hideme').hide();
$('#product1').fadeIn("slow");
});
$('a#lnkprd2').click(function()
{
$('.hideme').hide();
$('#product2').fadeIn("slow");
});
$('a#lnkprd3').click(function()
{
$('.hideme').hide();
$('#product3').fadeIn("slow");
});
});
</script>
<p><a href="#" id="close">Close</a></p>
<div class="box">
<div id='content1'> <a href="#" id="lnkprd1">Product1</a> </div>
<div id='content2'> <a href="#" id="lnkprd2">Product2</a> </div>
<div id='content3'> <a href="#" id="lnkprd3">Product2</a> </div>
</div>