javascript - 执行 JQuery 隐藏/显示 DIV 层后是否可以定位 HTML elementID？

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 的 anchor 标记和#ccw - 这意味着它将将该哈希附加到当前 URL 的末尾。

当 URL 末尾出现哈希 (#) 时，浏览器将链接到页面上与其匹配的元素(在本例中为 id 为 k9 的 div 或 id 为 ccw 的 div。您可以阅读 How do I link to part of a page? (hash?) 了解更多信息。

要解决此问题，您只需转换您的 <a></a>导航中的标签为 <button></button>标签，这样按下时它就不会链接到下面的 div。

一些建议:

当您说您试图“强制窗口位置保留/移回顶部。”时，您试图修复一开始不应该发生的事情，下次尝试采取措施回来看看它是否可以首先预防。

$(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>