javascript - 如何在页面加载时调用菜单功能？

Question

在我的一个项目中，我研究了应该加载不同容器的函数。该功能在用户单击菜单上的每个项目后起作用。现在我希望能够在页面加载时在该函数中传递参数，并能够加载所需的容器。这是我的函数的示例:

$("#main-menu li a").on('click', mainMenu);
function mainMenu(){
    var containerID = $(this).attr('data-container');
    $(this).parent().addClass('active').siblings().removeClass('active');
    $('#main-container > div[id="' + containerID + '"]').show();
    $('#main-container > div:not([id="' + containerID + '"])').hide();
}

#main-container > div:not([id="container1"]) {
  	display: none;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<div id="main-container" class="container">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <p class="navbar-text"><b>Main Menu</b></p>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
          <ul id="main-menu" class="dropdown-menu">
            <li class="active"><a href="#" data-container="container1">Home</a></li>
            <li><a href="#" data-container="container2">Reports</a></li>
            <li><a href="#" data-container="container3">Staff</a></li>
            <li><a href="#" data-container="container4">Settings</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container-fluid" id="container1" style="background-color:blue">Container 1</div>
  <div class="container-fluid" id="container2" style="background-color:orange">Container 2</div>
  <div class="container-fluid" id="container3" style="background-color:black">Container 3</div>
  <div class="container-fluid" id="container4" style="background-color:green">Container 4</div>
</div>

在上面的示例中，您可以看到我当前的代码始终加载容器 1。可能存在我想在页面加载时加载其他容器的情况。我的问题是如何使我的函数在单击和页面加载时工作，但同时能够在函数中传递参数并以这种方式加载所需的容器？如果有人可以帮助我完成这个示例，请告诉我。

Answer 1

$(document).ready(function(){
  $("#main-menu li a").on('click', mainMenu);
  function mainMenu(){
      var containerID = $(this).attr('data-container');
      $(this).parent().addClass('active').siblings().removeClass('active');
      $('#main-container > div[id="' + containerID + '"]').show();
      $('#main-container > div:not([id="' + containerID + '"])').hide();
  }

  //find the menu
  $('#main-menu')
     //find the nested link that is related to the section you
     //want to show on page load
    .find('a[data-container="container2"]')
    //trigger click so the mainMenu method happens for it
    .trigger('click');  
});

#main-container > div:not([id="container1"]) {
  	display: none;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<div id="main-container" class="container">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <p class="navbar-text"><b>Main Menu</b></p>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
          <ul id="main-menu" class="dropdown-menu">
            <li class="active"><a href="#" data-container="container1">Home</a></li>
            <li><a href="#" data-container="container2">Reports</a></li>
            <li><a href="#" data-container="container3">Staff</a></li>
            <li><a href="#" data-container="container4">Settings</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container-fluid" id="container1" style="background-color:blue">Container 1</div>
  <div class="container-fluid" id="container2" style="background-color:orange">Container 2</div>
  <div class="container-fluid" id="container3" style="background-color:black">Container 3</div>
  <div class="container-fluid" id="container4" style="background-color:green">Container 4</div>
</div>