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

Working Fiddle

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>

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

3 个答案: