Question

您好

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

我正在制作主网页，其中有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容器1中显示内容。当我点击“两个”选项时，它会显示我为容器2选项'two'编码的不同内容，但是当我点击选项'three'时，它会显示容器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>

jQuery改变Div内的内容

1 个答案: