Можно ли напрямую go на содержимое div по URL?

Question

Содержимое отображается с помощью предыдущей и следующей кнопок, но можно ли отобразить содержимое поля непосредственно со ссылкой?

Например:

https://example.com/content/# / 2

, так может ли второе поле отображаться в контенте?

$(document).ready(function() {
  $('#next').click(function() {
    if ($('.active').next('.case').length) {
      $('.active').removeClass('active')
        .next('.case')
        .addClass('active');
    }
  });
  $('#prev').click(function() {
    if ($('.active').prev('.case').length) {
      $('.active').removeClass('active')
        .prev('.case')
        .addClass('active');
    }
  });
});

.case {
  display: none
}

.active {
  background: yellow;
  border: 1px solid;
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="next">
  <h1>next</h1>
</div>
<div id="prev">
  <h1>prev</h1>
</div>
<div id="box1" class="case active">content 1</div>
<div id="box2" class="case">content 2</div>
<div id="box3" class="case">content 3</div>

Что я сделал?

if($(location).attr('hash') != null) {
        document.getElementById('box' + $(location).attr('hash').replace("#", "")).style.display = 'block';
    }

но это не сработало

Обновление 1

Я изменил:

if($(location).attr('hash') != null) {
        document.getElementById('box' + $(location).attr('hash').replace("#/", "")).style.display = 'block';
        document.getElementById('box' + $(location).attr('hash').replace("#/", "")).addClass('active');
    }

результат, он не работал

JSFiddle на демоверсии

Если возможно, можете ли вы вести меня?

Answer 1

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

$(document).ready(function() {
  $('#next').click(function() {
    if ($('.active').next('.case').length) {
      $('.active').removeClass('active')
        .next('.case')
        .addClass('active');
    }
  });
  $('#prev').click(function() {
    if ($('.active').prev('.case').length) {
      $('.active').removeClass('active')
        .prev('.case')
        .addClass('active');
    }
  });
//var location = window.location.href
var location = 'https://example.com/content/#/3'; //for example
 if(location.split("#/")) {
    $('#box' + location.split("#/")[1]).addClass('active');
  }
});

.case {
  display: none
}

.active {
  background: yellow;
  border: 1px solid;
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="next">
  <h1>next</h1>
</div>
<div id="prev">
  <h1>prev</h1>
</div>
<div id="box1" class="case">content 1</div>
<div id="box2" class="case">content 2</div>
<div id="box3" class="case">content 3</div>