Question

我正在尝试将Tabby JS Plugin与内联SVG元素一起使用。单击SVG外部的锚标记，效果非常好，当将其包裹在SVG元素周围时，页面将“跳转”到ID。

外面有人可以提供原因的解释吗？

我使用原始插件HTML创建了demo，您可以在其中看到此问题。

<g data-tabs>
        <a data-tab href="#tab1">
      <rect id="red" x="177.9" y="44.2" class="tab st1" width="96" height="77.5"/>
    </a>
        <a data-tab href="#tab2">
      <rect id="orange" x="107.9" y="169.8" class="tab st2" width="166" height="101.5"/>
    </a>
</g>

非常感谢

Answer 1

这是由于您正在使用 tabby 在选项卡中显示HTML元素而发生的，而对于使用 # 的SVG元素，（位置哈希）以导航到页面元素。位置哈希将使控件跳转到指定的元素。这是您要注意的行为。

您可以阅读以下博客，以更好地了解位置哈希导航的发生方式。

W3学校文档： https://www.w3schools.com/jsref/prop_loc_hash.asp

博客解释导航： https://www.oshyn.com/Blogs/2011/December/JavaScript_Navigation_using_Hash_Change____

带有SVG的Tabby JS防止滚动

1 个答案: