On page load , 1st div which is "div1" is enabled , rest are hidden . On further link clicks , respective divs , as defined by class of list element , are enabled , rest divs are disabled
jQuery(function () {
$('#nav a').click(function () {
var myClassLinked = $(this).parent().attr('class');
$('#container > :not(#' + myClassLinked + ')').hide();
$('#' + myClassLinked ).fadeIn(); }); });
$(document).ready(function () {
$('#container > :not(#' + 'div1' + ')').hide();
$('#' + 'div1').fadeIn();
});
Full example code
jQuery(function () {
$('#nav a').click(function () {
var myClassLinked = $(this).parent().attr('class');
$('#container > :not(#' + myClassLinked + ')').hide();
$('#' + myClassLinked ).fadeIn(); }); });
$(document).ready(function () {
$('#container > :not(#' + 'div1' + ')').hide();
$('#' + 'div1').fadeIn();
});
Full example code