javascript - 我怎样才能防止我的主播在我的屏幕上跳来跳去？

Question

我决定尝试仅使用 CSS 和 HTML 创建一个选项卡式菜单。使用 :target 伪类来显示适当的 div，我已经实现了它，只是它跳来跳去有点过于用户友好:

http://brad.sebdengroup.com/newodynsite/stockman.php#StockControl

无论如何我可以解决这个问题吗？最初，我想远离 JavaScript，但如果它解决了这个问题，我会很乐意添加一些。

注意:我知道我可以使用 jQuery/一些花哨的库重建一个新的选项卡式菜单，但如果可能的话，我宁愿解决这个问题。

Answer 1

这是因为您在 anchor 中使用了哈希值。这些导致它跳转到具有哈希指定的 id 的 div。

要对此进行排序，您可以使用 jQuery 通过 .preventDefault(); 停止跳跃

您可以通过为每个跳转的 anchor 提供 prevent 类然后使用 jQuery 来停止跳转来使用它。当然，您可以根据您的 html 结构更改此选择器。

$(".prevent").click(function(e) { //Note the e for event
  e.preventDefault();
});

不用 jQuery 编辑

在诅咒不能使用 jQuery 之后，我试图组合一个纯 js 解决方案。您需要检查它以确保它在您的页面上有效。

Here is the jsfiddle example .

我所做的是找到页面上的所有 anchor ，然后将 return false 添加到它们的 onclick 属性中。如果这是在您的实时网站上进行，您将需要进一步选择 anchor ，请参阅 example和解释:

我还给你不想跳的 anchor 添加了一个类。要使用它，您需要将“menuControl”类添加到您想要停止跳跃的任何 anchor 。

以下是我的 JavaScript，以防 jsfiddle 链接损坏。顺便提一下，您现在需要使用 JavaScript 控制这些选项卡的导航，因为使用 return false 将停止导航。

var anchors = document.getElementsByTagName("a");

for(var i = 0; i < anchors.length; i++) {
    if ( anchors[i].className == "menuControl" ) {
        anchors[i].setAttribute("onclick", "return false");
    }
} ​