Можно ли нацелить элемент HTML elementID после выполнения слоя JQuery Hide / Show DIV?

Question

При нажатии кнопки я скрываю один div и показываю другой. Однако, когда новый div показывает, что расположение окна переходит к этому div, перемещая пользовательский интерфейс от кнопок к div. Ниже я пытаюсь настроить таргетинг на elementID на странице, чтобы заставить окно оставаться или вернуться к вершине.

Возможно ли это, или показанный div всегда будет иметь приоритет?

$(function(){
  $("#ccw").hide();  
    $("#ccwcatalog").click(function(){
        $("[name='k9course']").hide();
        $("[name='ccwcourse']").show();
        $("a#top").focus()
  });
});

Answer 1

Ваши "кнопки" k9 и ccw являются тегами привязки с href #k9 и #ccw - это означает, что он добавит ha sh в конец текущего URL.

Если в конце URL-адреса присутствует символ ha sh (#), браузер будет ссылаться на элемент, которому он соответствует на странице (в данном случае это div с id k9 или div с id ccw. Вы можете прочитать Как мне сделать ссылку на часть страницы? (Ха sh?) для получения дополнительной информации.

Чтобы это исправить, вы можете просто конвертировать <a></a> теги в вашей навигации к тегам <button></button>, поэтому при нажатии на них не будет ссылки на элемент ниже.

Несколько советов:

Когда вы сказали, что пытаетесь "принудительно установить местоположение окна в оставайтесь / вернитесь наверх. ", вы пытались исправить то, что не должно было случиться в первую очередь, в следующий раз попробуйте сделать шаг назад и посмотреть, можно ли это предотвратить в первую очередь.

$(function() {
  $("#ccw").hide();
  $("#ccwcatalog").click(function() {
    $("[name='k9course']").hide();
    $("[name='ccwcourse']").show();
    $("a#logotop").focus()
  });
});

$(function() {
  $("#k9catalog").click(function() {
    $("[name='ccwcourse']").hide();
    $("[name='k9course']").show();
    $("a#logotop").focus()
  });
});

.col-lg-3,
.col-md-6 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px
}

#course-nav {
  align-items: center;
  justify-content: center;
}

.single-classes-item {
  background: #003d76;
  text-align: center;
  margin-bottom: 30px;
  padding-top: 30px;
  padding-bottom: 32px;
}

.course-btn {
  display: inline-block;
  font-size: 18.5px;
  font-weight: 500;
  padding: 32px 50px 32px 50px;
  color: #ffffff;
  background: #003d76;
  letter-spacing: 0.5px;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="classes-section spad" id="courses" name="courses">
  <div class="container">
    <div id="course-nav" class="row">
      <div class="col-lg-3 col-md-6">
        <div>
          <h2><button id="k9catalog" class="course-btn">K-9 Class Catalog</button></h2>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div>
          <h2><button id="ccwcatalog" class="course-btn">CCW Class Catalog</button></h2>
        </div>
      </div>
    </div>
    <div id="ccw" class="row" name="ccwcourse">
      <div class="col-lg-3 col-md-6">
        <div class="single-classes-item">
          <h4>Intro to Fire arms</h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="single-classes-item">
          <h4>Second Class</h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="single-classes-item">
          <h4>Third Class</h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="single-classes-item">
          <h4>Fourth Class</h4>
        </div>
      </div>
    </div>

    <div id="k9" class="row" name="k9course">
      <div class="col-lg-3 col-md-6">
        <div class="single-classes-item">
          <h4>K9 Class one</h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="single-classes-item">
          <h4>Second Class</h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="single-classes-item">
          <h4>Third Class</h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="single-classes-item">
          <h4>Fourth Class</h4>
        </div>
      </div>
    </div>
  </div>
</div>