如何防止我的锚点如此多地跳到我的屏幕上？

Question

我决定尝试使用CSS和HTML创建一个标签式菜单.使用:target伪类来显示适当的div,我实现了它,只是它跳得太多以至于用户友好:

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

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

注意:我知道我可以使用jQuery /一些花哨的库重建一个新的选项卡式菜单,但如果可能的话,我宁愿修复它.

Answer 1

这是因为你在你的锚中使用哈希值.这些导致它跳转到具有哈希指定的id的div.

要对此进行排序,您可以使用jQuery来停止跳转 .preventDefault();

你可以通过给每个跳过一个类的锚prevent然后使用jQuery来停止跳跃来使用它.当然,您可以根据您的html结构更改此选择器.

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

没有jQuery编辑

在诅咒没有使用jQuery之后,我试图整合一个纯粹的js解决方案.您需要检查一下以确保它在您的页面上有效.

这是jsfiddle的例子.

我所做的是找到页面上的所有锚点,然后在其onclick属性中添加return false.如果要在您的实际网站上进行此操作,则需要进一步选择锚点,请参阅此示例和说明:

我还为你不想跳的锚添加了一个类.要使用此功能,您需要将"menuControl"类添加到要停止跳转的任何锚点.

下面是我的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");
    }
} ?