Javascript 使用jQuery预激活链接

多亏了在Stack Overflow上找到的几个答案，我做出了如下的构造，它可以正常工作，没有问题：

真正的问题是，当页面加载时，只有顶层导航菜单可见，没有选择任何项目。此外，当任何顶层按钮打开关联的侧菜单时，侧菜单中也没有选定的项目。因此不显示任何内容

由于我对任何编程都一窍不通，因此我礼貌地请求您在以下事项上给予帮助：

我需要任何一个顶部菜单项预选与适当的侧菜单打开时，页面加载

我还需要在页面加载或顶级菜单项激活/预激活时预选任何一个附带菜单项，并显示相应的内容

甚至可以是随机顺序，例如，随机激活的顶级菜单项显示其侧菜单，随机激活的侧菜单项显示其内容

任何形式的帮助都将不胜感激。提前谢谢

希望我没有要求太多。：）

---

以下是用于显示/隐藏需要更新的元素的JS for 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();
});

---

其余部分可在

中找到，请将此添加到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”号。检查小提琴：下面是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”号。
下面是JSFIDLE及其工作示例：

实际上，我只添加了以下JS片段，它是根据Inclusible的示例编译而成的：

$(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中，添加了一个虚拟类“default”，用于在页面/菜单加载时应选择的菜单和子菜单项

再一次，结果是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();
});

首先，当页面加载时，您如何识别右侧应该显示哪些菜单？我认为可以用与单击顶部菜单中的链接时相同的方式来识别它。您的答案充其量只是一条注释，链接告诉您他们使用了
$（function（）{}）
是
$（document）.ready（function（）{}）的函数等价物。好的。让我们扩展您的答案。：）我应该放置什么，而不是//在此处显示您想要强制为访问者预激活页面的任何内容。。。说以下所有项目：菜单2>左菜单2.2>左菜单2.2的内容？我已将您的代码添加到我的JSFIDLE中，但不幸的是，它仅显示激活的菜单1，但需要鼠标单击以显示其侧菜单，然后显示没有选定项。我做错什么了吗？请注意，任何名称中带有ACTIVE的类都只是用于外观调整，它们不负责显示/隐藏。以下是我的想法，我可能（而且很可能）是错的。有没有一种方法可以在没有用户干预的情况下，通过定时器强制激活链接？可能我唯一需要的是第一：强制激活顶部菜单中的任何链接，第二：强制激活打开侧菜单中的任何链接？问题是我不知道怎么做，所以我自己无法尝试。对不起，我的代码错了，请再次检查我更新的答案