显示一个 div 对应于按钮单击

Question

<!--Act as button-->
<div class="sprite-big not-visited" id="1">B1</div>
<div class="sprite-big not-visited" id="2">B2</div>
<div class="sprite-big not-visited" id="3">B3</div>
<!--These are the content div-->
<div id="D1">Some content</div>
<div id="D2">Some content</div>
<div id="D3">Some content</div>

单击B1 button我只想显示D1 div

单击B2 button隐藏以前的D1 div并仅显示D2 div。

任何进一步点击的逻辑相同。

Answer 1

使用单击事件处理程序并显示基于单击的元素 ID 的元素。

// cache all div and hide
var $div = $('.div').hide();
// show the first div initially
$div.first().show();
// bind a click event handler
$('div.sprite-big').click(function() {
  // hide all divs
  $div.hide();
  // get div to show based on clicked element id
  // and show the element
  $('#D' + this.id).show();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Act as button-->
<div class="sprite-big not-visited" id="1">B1</div>
<div class="sprite-big not-visited" id="2">B2</div>
<div class="sprite-big not-visited" id="3">B3</div>
<!--These are the content div-->
<div class="div" id="D1">Some content1</div>
<div class="div" id="D2">Some content2</div>
<div class="div" id="D3">Some content3</div>

Answer 2

工作小提琴

Jquery

HideDiv();
$('.sprite-big').on("click", function() {
  showHide($(this).prop('id'))
});
function showHide(id) {
  HideDiv();
  var id = '#D' + id;
  $(id).show();
}
function HideDiv() {
  $('#D1').hide();
  $('#D2').hide();
  $('#D3').hide();
}

Answer 3

我刚才发布了这个确切的问题。

试试这个：

   <script>
    $('#place').on('change', function() {
      if ( this.id== '1');
      {
        $("#D1").show();
        $("#D2").hide();
        $("#D3").hide();
      }
      else if ( this.id== '2'); 
      {
        $("#D1").hide();
        $("#D2").show();
        $("#D3").hide();
      }
       else if ( this.id== '3'); 
      {
        $("#D1").hide();
        $("#D2").hide();
        $("#D3").show();
      }
      else
      {
      $("#D1").show();
      $("#D2").show();
      $("#D3").show();
      }
    });
    });
    </script>
<div id="D1">Some content</div>
<div id="D2">Some content</div>
<div id="D3">Some content</div>
<div id = place>
<div class="sprite-big not-visited" id="1">B1</div>
<div class="sprite-big not-visited" id="2">B2</div>
<div class="sprite-big not-visited" id="3">B3</div>
</div>