<!--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.

Та же логика для любых дальнейших кликов.

1
erdeepak 10 Янв 2017 в 09:57

3 ответа

Лучший ответ

Используйте обработчик события клика и покажите элемент на основе идентификатора кликаемого элемента.

// 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>
1
Pranav C Balan 10 Янв 2017 в 07:02

Рабочая скрипка

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();
}
0
Shree 10 Янв 2017 в 07:13

Я только что опубликовал этот точный вопрос минуту назад.

Попробуй это :

   <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>
0
FreedomPride 11 Янв 2017 в 02:49