jQuery在Div中改变内容

Question

Hi

我很难找到问题的答案，很可能是因为我的代码没有以正确的方式编写。

我正在制作主网页，有5个不同的选项可供选择，当用户单击选项id时，在Div容器中显示不同的内容。到目前为止，我成功地编写了两个选项，以便在单击时显示不同的内容，但在第三、第四和第五个选项上却无法做到这一点。

请看下面的代码，如果没有太多的问题，请您给我建议。

ps:我完全是开发的初学者，所以请不要太多:)。

下面第一个是我的HTML：

​

jQuery(document).ready(function($) {
  $('#one').on('click', function() {
    if ($('.container2').css('display') != 'none') {
      $('.container').show().siblings('div').hide();
    }
  });
});



jQuery(document).ready(function($) {
  $('#two').on('click', function() {
    if ($('.container').css('display') != 'none') {
      $('.container2').show().siblings('div').hide();
    }
  });
});

jQuery(document).ready(function($) {
  $('#three').on('click', function() {
    if ($('????????').css('display') != 'none') {
      $('.container3').show().siblings('div').hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="body">
  <header class="mainHeader">


    <nav>
      <ul>
        <li><a id="one" href="#">ONE</a>
        </li>
        <!--class="active"-->
        <li><a id="two" href="#">TWO</a>
        </li>
        <li><a id="three" href="#">THREE</a>
        </li>
        <li><a id="four" href="#">FOUR</a>
        </li>
        <li><a id="five" href="#">FIVE</a>
        </li>
      </ul>
    </nav>
  </header>


  <div class="container">
    <div class="mainContent">
      <p>TEXT and ETC</p>
    </div>
  </div>



  <div class="container2" style="display: none;">
    <div class="content2">
      <p>TEXT and ETC</p>
    </div>
  </div>

  <div class="container3" style="display: none">
    <div class="mainContent3">
      <p>TEXT and ETC</p>
    </div>
  </div>

  <div class="container4" style="display: none">

  </div>

  <div class="container5" style="display: none">

  </div>

​

所以当我点击' one‘选项时，它会显示Div容器中的内容。当我单击‘2’选项时，它显示了我为容器2选项‘2’编写的不同内容，但当我单击选项‘3’时，它显示了容器3内容，但单击后，我无法返回到2或1个选项。

我希望这不是太多的要求。提前谢谢。

Answer 1

希望这能有所帮助

​

$(document).ready(function() {

  $(".menu").click(function() {
   var selectedContainerId = $(this).attr("data-target");
	
   //show the selected container
   var selectedContainer = $(selectedContainerId);
   selectedContainer.show();
 
   //hide others
   $('div[id*="container_"]').not(selectedContainer).hide();
 
  });
});

div[id*="container_"] {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<header class="mainHeader">
  <nav>
<ul>
  <li><a class="menu" data-target="#container_one" href="#">ONE</a></li>
  <!--class="active"-->
  <li><a class="menu" data-target="#container_two" href="#">TWO</a></li>
  <li><a class="menu" data-target="#container_three" href="#">THREE</a></li>
  <li><a class="menu" data-target="#container_four" href="#">FOUR</a></li>
  <li><a class="menu" data-target="#container_five" href="#">FIVE</a></li>
</ul>
  </nav>
</header>


<div id="container_one">
  <div class="mainContent">
<p> TEXT and ETC 1 </p>
  </div>
</div>



<div id="container_two">
  <div class="mainContent">
<p> TEXT and ETC 2 </p>
  </div>
</div>

<div id="container_three">
  <div class="mainContent">
<p> TEXT and ETC 3 </p>
  </div>
</div>

<div id="container_four">
  <div class="mainContent">
<p> TEXT and ETC 4 </p>
  </div>
</div>

<div id="container_five">
  <div class="mainContent">
<p> TEXT and ETC 5 </p>
  </div>
</div>

​