Simple tab, why is this not working??
Can someone please help me out. Please look at the line under $(.tabs).click it does not work like that, but it does work fine if I replace $("#pane .tabpane .selected") with just $(".selected"). Any help would be appreciated. Thanks!
<html>
<script src="../js/jquery-1.4.2.min.js"></script>
<style>
.selected{
//display:block;
}
</style>
<script>
$(document).ready(function(){
$('.tabs').click(function(){
$("#pane .tabpane .selected").hide();
$("#pane .tabpane .selected").removeClass('selected');
/*THE ABOVE DOES NOT WORK, BUT THIS DOES
$(".selected").hide();
$(".selected").removeClass('selected');
*/
$(this.rel).addClass('selected');
$(this.rel).show();
});
$(".tabpane").hide();
});
</script>
<table with=500>
<tr>
<td width = 100>
<a href="#" class="tabs" rel="#tab1">MY TAB 1</a>
</td>
<td width = 100>
<a href="#" class="tabs" rel="#tab2">MY TAB 2</a>
</td>
</tr>
<tr>
<tr>
<td width=500>
<div id="tab1" class="tabpane">
Tab1 info
</div>
<div id="tab2" class="tabpane">
Tab2 info
</div>
</div>
</td>
</tr>
</table>
</tr>
</table>
</html>