是否可以阻止点击处理程序之外的默认浏览器锚定行为?

时间:2017-04-25 12:35:53

标签: javascript jquery html

我使用页面锚点创建了一个标签式界面。这是一个问题,因为默认情况下,当链接到链接的链接在同一页面上时,浏览器会导航到锚点:

showTab = function(tabName) {
  tabName = tabName.replace(" ", "_"); //Fix space in tab name so that JS can use it.
  $(".tab_selected").addClass("tab");
  $("#p_" + document.querySelector(".tab_selected").id).hide();
  $(".tab_selected").removeClass("tab_selected");
  $("#" + tabName).addClass("tab_selected");
  $("#p_" + tabName).show();
  location.hash = tabName;
  document.title = tabName.replace("_", " ") + " | AnED";
}

//if (location.hash.length < 1)
//  showTab("Information");
body {
  height:1200px;
}

.page_tabgroup {
	display:table;
	margin:0 auto;
	width:auto;
	margin-top:50px;
	border-radius:4px;
	background-color:#FFF;
	border:solid 2px rgba(0, 120, 255, 0.8);
}

.page_tabgroup > a {
	text-decoration:none;
	border:none;
}

.page_tabgroup > .tab {
	display:table-cell;
	padding:10px 20px 10px 20px;
	color:rgba(0, 120, 255, 0.8);
}

.page_tabgroup > .tab:hover, .primary_page > .page > .page_tabgroup > .tab_selected:hover {
	background-color:rgba(0, 120, 255, 0.95);
	border:inherit solid rgba(0, 120, 255, 0.6);
	color:#FFF;
}

.page_tabgroup > .tab_selected {
	display:table-cell;
	padding:10px 20px 10px 20px;
	color:#FFF;
	background-color:rgba(0, 120, 255, 0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page_tabgroup">
  <a href="javascript:showTab('Information')" class="tab tab_selected" id="Information">Information</a>
  <a href="javascript:showTab('Course_Dates')" class="tab" id="Course_Dates">Course Dates</a>
</div>

在上面的示例中,浏览器会自动向下滚动,以便锚元素位于顶部。这是令人讨厌的行为,但并不令人惊讶。我尝试使用preventDefault()作为this answerAvoid window jump to top when clicking #-links,但它没有任何效果。这可能是因为我没有使用点击处理程序(该功能直接通过javascript:showTab链接执行)。

使用点击处理程序阻止showTab功能完全执行,并使用showTab(e.id);附加该功能会在Cannot read property 'replace' of undefined的第2行产生showTab错误:

$(".tab_selected").click(function(e) {
    e.preventDefault();
});

$(".tab").click(function(e) {
    e.preventDefault();
});

是否可以阻止点击处理程序的的默认锚行为?如果没有,我该如何解决这个问题?

3 个答案:

答案 0 :(得分:0)

你必须采取不引人注目的方式。

  1. 删除hrefjavascript:。他们已经老了。
  2. 使用正确的jQuery方式初始化事件监听器。
  3. 使用history.pushState(stateObj, "page", "url");更改哈希值,正确方法。
  4. &#13;
    &#13;
    $(function () {
      $("a.tab").click(function(e) {
        e.preventDefault();
        var tabName = this.id;
        tabName = tabName.replace(" ", "_"); //Fix space in tab name so that JS can use it.
        $(".tab_selected").addClass("tab");
        $("#p_" + document.querySelector(".tab_selected").id).hide();
        $(".tab_selected").removeClass("tab_selected");
        $("#" + tabName).addClass("tab_selected");
        $("#p_" + tabName).show();
        // location.hash = tabName;
        document.title = tabName.replace("_", " ") + " | AnED";
        return false;
      });
    });
    &#13;
    body {
      height:1200px;
    }
    
    .page_tabgroup {
      display:table;
      margin:0 auto;
      width:auto;
      margin-top:50px;
      border-radius:4px;
      background-color:#FFF;
      border:solid 2px rgba(0, 120, 255, 0.8);
    }
    
    .page_tabgroup > a {
      text-decoration:none;
      border:none;
    }
    
    .page_tabgroup > .tab {
      display:table-cell;
      padding:10px 20px 10px 20px;
      color:rgba(0, 120, 255, 0.8);
    }
    
    .page_tabgroup > .tab:hover, .primary_page > .page > .page_tabgroup > .tab_selected:hover {
      background-color:rgba(0, 120, 255, 0.95);
      border:inherit solid rgba(0, 120, 255, 0.6);
      color:#FFF;
    }
    
    .page_tabgroup > .tab_selected {
      display:table-cell;
      padding:10px 20px 10px 20px;
      color:#FFF;
      background-color:rgba(0, 120, 255, 0.8);
    }
    &#13;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="page_tabgroup">
      <a href="#" class="tab tab_selected" id="Information">Information</a>
      <a href="#" class="tab" id="Course_Dates">Course Dates</a>
      <a href="#" class="tab" id="Home_Study">Home Study</a>
      <a href="#" class="tab" id="In-House">In-House</a>
    </div>
    &#13;
    &#13;
    &#13;

答案 1 :(得分:0)

只需为location.hash = tabName;更改history.pushState({}, '', tabName);即可。这应该可以解决问题。

e.preventDefault()在这里无法帮助。

答案 2 :(得分:0)

滚动问题实际上与锚定点击无关,它与滚动有关,因为设置了哈希。同时使用内联事件并使用href来调用JavaScript并不是最好的选择。因此,由于您使用的是jQuery,因此可以使用事件委派来添加单击。你可以抓住id并显示和隐藏元素。

$(".page_tabgroup").on("click", ".tab", function(e) { //event delegation
  e.preventDefault(); //stop click
  var selectedId = $(".tab_selected").removeClass("tab_selected").attr("id"), //remove what is selected
    clickedElement = $(this).addClass("tab_selected"),
    clickedElementId = clickedElement.attr("id");

  $("#p_" + selectedId).hide(); //show the tab that was selected prev
  $("#p_" + clickedElementId).show(); //show the current tab

  //now to stop scroll, you need to remove the id of the element, set hash, and add it back.

  clickedElement.attr("id", "temp");  //remove
  window.location.hash = clickedElementId;   //set
  clickedElement.attr("id", clickedElementId);  //set back

});