предварительного активирования связи с JQuery

Question

Благодаря нескольким ответам, найденные на переполнение стека я сделал следующую конструкцию, которая работает, как это должно без проблем: https://jsfiddle.net/cL1xw2y5/

Реальная проблема заключается в том, что при загрузке страницы это только верхний уровень отображается меню навигации без выбранных элементов. Также, когда какая-либо клавиша верхнего уровня открывает соответствующее боковое меню, в боковом меню также нет элемента. И поэтому контент не отображается.

Как я общий нуб в любом виде программирования я учтиво прошу за любезную помощь со следующими вопросами:

1. мне нужна какая-либо один из главных пунктов меню предварительно выбранного с присвоенным боковым меню открывается при загрузке страницы.
2. Мне также нужен любой из элементов меню, предварительно выбранных с соответствующим содержимым, отображаемым при загрузке страницы или активированном/предварительно активированном элементе меню верхнего уровня.

Может быть даже в случайном порядке, скажем, случайно активированный элемент меню верхнего уровня показывает свое боковое меню со случайно активированным боковым пунктом меню, отображающим его содержимое.

Любая помощь была бы оценена по-разному. Заранее спасибо.

Надеюсь, что я не прошу слишком многого. :)

---

Вот JS для JQuery используется для показа/скрытия элементов, которые должны быть обновлены:

$(function() { 
    $('#sub_1_1 li').click(function() { 
    $('#sub_1_1 li').removeClass('sub_1_sub_active'); 
    $('#sub_1_2 li').removeClass('sub_1_sub_active'); 
    $(this).addClass("sub_1_sub_active"); 
    }); 
}); 

$(function() { 
    $('#sub_1_2 li').click(function() { 
    $('#sub_1_1 li').removeClass('sub_1_sub_active'); 
    $('#sub_1_2 li').removeClass('sub_1_sub_active'); 
    $(this).addClass("sub_1_sub_active"); 
    }); 
}); 


$(function(){ 
$('#top a').click(function(e){ 
    hideContentDivs(); 
    var tmp_div = $(this).parent().index(); 
    $('.top div').eq(tmp_div).show(); 
    }); 

function hideContentDivs(){ 
    $('.top div').each(function(){ 
    $(this).hide();}); 
} 
hideContentDivs(); 
}); 



$(function(){ 
$('#sub_1_1 a').click(function(e){ 
    hideContentDivs(); 
    var tmp_div = $(this).parent().index(); 
    $('.sub_1_1 div').eq(tmp_div).show(); 
    }); 

function hideContentDivs(){ 
    $('.sub_1_1 div').each(function(){ 
    $(this).hide();}); 
    $('.sub_1_2 div').each(function(){ 
    $(this).hide();}); 
} 
hideContentDivs(); 
}); 


$(function(){ 
$('#sub_1_2 a').click(function(e){ 
    hideContentDivs(); 
    var tmp_div = $(this).parent().index(); 
    $('.sub_1_2 div').eq(tmp_div).show(); 
    }); 

function hideContentDivs(){ 
    $('.sub_1_1 div').each(function(){ 
    $(this).hide();}); 
    $('.sub_1_2 div').each(function(){ 
    $(this).hide();}); 
} 
hideContentDivs(); 
}); 

Остальное можно найти на https://jsfiddle.net/cL1xw2y5/

Answer 1

Итак, вот JSFiddle с рабочим примером: http://jsfiddle.net/502Lj77y/

На самом деле, я только добавил следующий фрагмент JS, составленный из примеров невероятных по:

$(function(){ 
    $('#top li a.default').click(); 
    $('#left_3 li a.default').click(); 
}); 


$(function(){ 
    function getItemId(item){ 
    var cls = $(item).attr('id'); 
    var id = parseInt(cls.replace('top_', '')); 
    return id;  
    } 
    $('#top ul li').click(function(){ 
     var itemId = getItemId(this); 
     $('#left_'+itemId+' li a.default').click(); 
    }); 
}); 

моих первоначальным JS и добавил фиктивный класс «по умолчанию» для элементов меню и подменю, которые должны быть выбраны при загрузке страницы/меню.

Снова Результат - достижение 100% Невероятное достижение.

Все, кажется, работает нормально.

---

Могу ли я оптимизировать добавленный кусок JS таким образом?

$(function(){ 
    function getItemId(item){ 
    var cls = $(item).attr('id'); 
    var id = parseInt(cls.replace('top_', '')); 
    return id;  
    } 
    $('#top ul li').click(function(){ 
     var itemId = getItemId(this); 
     $('#left_'+itemId+' li a.default').click(); 
    }); 
    $('#top li a.default').click(); 
}); 

Answer 2

Добавить это в конце вашего javascript. Это будет имитировать, нажав на пункты меню после загрузки страницы:

$(function(){ 
    $('#top li:first').click(); 
    $('#top li:first a').click(); 

    $('#sub_1_1 li:first').click(); 
    $('#sub_1_1 li:first a').click(); 
}); 

Но я переписал весь код, чтобы я считаю, более удобный и универсальный способ, который основан на анализе классов элементов меню и его «ID» номер. Проверьте скрипку: https://jsfiddle.net/cL1xw2y5/6/ Вот JavaScript:

$(document).ready(function() { 

    // what should be active/visible on page load 
    $('#top .menuitem-1').addClass('active'); 
    $('#side .menuitem-1').addClass('active'); 
    $('#side #submenu-1').removeClass('invisible'); 
    $('.content #content-1-1').removeClass('invisible'); 

    // what happens after top menu item click 
    $('#top ul li').click(function(){ 
     // get number of pressed menu item from its class 
     var itemId = getItemId(this); 
     // activate pressed item 
     $('#top li').removeClass('active'); 
     $('#top .menuitem-'+itemId).addClass('active'); 
     // display appropriate left menu 
     $('#side ul').addClass('invisible'); 
     $('#side #submenu-'+itemId).removeClass('invisible');   
     // activate first item of submenu 
     $('#side li').removeClass('active'); 
     $('#side #submenu-'+itemId+' .menuitem-1').addClass('active'); 
     // show appropriate content 
     $('.content div').addClass('invisible'); 
     $('.content #content-'+itemId+'-1').removeClass('invisible'); 

    }); 

    // what happens after side menu item click 
    $('#side ul li').click(function(){ 

     // get number of pressed menu item from its class 
     var subItemId = getItemId(this); 
     // get number of top menu active item 
     var topItemId = getActiveTopMenuItemId(); 
     // activate pressed left menu item 
     $('#side li').removeClass('active'); 
     $('#side #submenu-'+topItemId+' .menuitem-'+subItemId).addClass('active'); 
     // show appropriate content 
     $('.content div').addClass('invisible'); 
     $('.content #content-'+topItemId+'-'+subItemId).removeClass('invisible'); 
    }); 

}); 

function getItemId(item){ 

    var cls = $(item).attr('class'); 
    var id = parseInt(cls.replace('menuitem-', '')); 
    return id;  

} 

function getActiveTopMenuItemId(){ 

    var cls = $('#top ul .active').attr('class'); 
    var id = parseInt(cls.replace(' active','').replace('menuitem-','')); 
    return id; 

} 

Но вы должны переписать CSS снова :) Только не добавлять никаких других классов к пунктам меню, в противном случае вам придется заменить его пустой строкой '' в getItemId() и getActiveTopMenuItemId() функции, в которых анализируются числа «id».