Hi there,
I'm using the following code for my tab navigation (which works really well):
<script type="text/javascript">
$(document).ready(function () {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
$("#Heading").html($(this).find("a").attr("id"));
return false;
});
});
</script>
In these tabs are somes tables and divs. Now, I wanted to hide or fadeOut a div, which is placed in a table. The div itself also contains a table. I came up with the following code:
<script type="text/javascript">
$(document).ready(function () {
$("a.divimg").click(function () {
var divContainer = $(this).attr("href");
$(divContainer).fadeOut();
});
});
</script>
But this doesn't work. The value of divContainer is exactly the id of the div with a # in front (example: #div1). I have to do it this way (dynamically), because the HTML is generated by ASP.Net code.
Do you guys have a clue, why this is not working?
Thanks and best regards,
Mark