Javascript 返回主屏幕的按钮不工作

我遇到的这个问题有点难以解释，但我尽可能简化并使其简单化

声明：
如下图所示，有9个div对单击非常敏感，当您单击其中任何一个div时，会出现另一个屏幕，这在下面的第二张图片中也很明显

问题是： 在第一个DIV中，当我单击返回主菜单时，一切正常，但当我单击第二个DIV并单击返回主菜单时，按钮不起作用。我对这两种方法都使用了相同的backtoMain（）方法，但显然有些地方出了问题

我用来让BacktoMinMenu按钮工作的javascript代码：

            function hideAllDivs () { /* the function that hides all divs */

              jQuery('#thirdVision').hide();
              jQuery('#forthVision').hide();
              jQuery('#fifthVision').hide();
              jQuery('#sixthVision').hide();
              jQuery('#seventhVision').hide();
              jQuery('#eightthVision').hide();
              jQuery('#ninethVision').hide();
              jQuery('#tenthVision').hide();
              jQuery('#eleventhVision').hide();
              //jQuery('#secondVision').show();
            }
            function returnToMenu () { /* the function that shows main screen which is secondVision */
              hideAllDivs();
              jQuery('#secondVision').show(1400); /* shows secondVision "First Picture" in 1 and a half second */
            }
            jQuery('#backToMain').click(function(e){ /* the function responsible for when "backtoMainMenu" button is clicked */
                returnToMenu();
                e.preventDefault();
            });

---

我已经研究了大约3天了，但不知道如何解决它。

@Nima您对多个后退按钮使用了相同的id，而对于id则使用类

html链接应该是

<a href="#" class="button big green backToMain"><span> Back To </span>Main Menu</a>

---

希望这会有帮助

使用类而不是ID，如：

获取单击元素的

索引（）

，以使用

.eq（）

方法检索相关内容

HTML：示例

<div id="container">

  <div class="box">Title 1</div>
  <div class="box">Title 2</div>
  <div class="box">Title 3</div>
  ...

  <div class="content">Content 1</div>
  <div class="content">Content 2</div>
  <div class="content">Content 3</div>
  ...

  <button id="backToMain">BACK TO MAIN</button>

</div>

---

每个div容器是否都有单独的后退菜单按钮？或者您对所有这些按钮都使用了一个通用按钮？我在每个div中使用以下代码作为back menu按钮：

<div id="container">

  <div class="box">Title 1</div>
  <div class="box">Title 2</div>
  <div class="box">Title 3</div>
  ...

  <div class="content">Content 1</div>
  <div class="content">Content 2</div>
  <div class="content">Content 3</div>
  ...

  <button id="backToMain">BACK TO MAIN</button>

</div>

(function( $ ){

  $('.box').click(function(){        
    var myIndex = $(this).index();
    $('.content').eq( myIndex ).show();
    $('#backToMain').show();
  });

  $('#backToMain').click(function(e){ 
      $(this).hide();
      $('.content').hide();
  });

})(jQuery);