jQuery更改Div内的内容

你好

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

我正在制作主网页，其中有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(); } }); }); 

   
 
 
 
ONE 
  
TWO 
 
THREE 
 
FOUR 
 
FIVE 
 
 
 
 
 
 
TEXT and ETC
 
 
 
 
 
TEXT and ETC
 
 
 
 
 
TEXT and ETC
 
 
 
 
 
  

因此，当我点击“one”选项时，它会在Div容器1中显示内容。 当我点击“两个”选项时，它会显示我为容器2选项“二”编码的不同内容，但是当我点击选项“三”时，它会显示容器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; } 

  
 
 
 
ONE
  
TWO
 
THREE
 
FOUR
 
FIVE
 
 
 
 
 
 
 TEXT and ETC 1 
 
 
 
 
 
 TEXT and ETC 2 
 
 
 
 
 
 TEXT and ETC 3 
 
 
 
 
 
 TEXT and ETC 4 
 
 
 
 
 
 TEXT and ETC 5