Question

我只使用HTML和CSS构建了这种手风琴，但只要单击手风琴上的其中一个标签，页面就会跳转，以便标签位于页面顶部。例如：

<div id="tab-1"><a href="#tab-1" class="tab">502-831</a>

我在网上浏览了一下并尝试了一些解决方案，例如JavaScript和onlick解决方案，但解决方案什么都不做或导致标签停止运行。我正在使用Joomla，因此JavaScript没有多少支持。这是jsfiddle上手风琴的裸骨代码，如果你在单击手风琴选项卡时看右边的滚动条，你会看到它跳跃。

http://jsfiddle.net/1pjudu4j/4/

Answer 1

我将这个CSS行代码添加到您的示例中，并且按预期工作。

.accordion div:blur .content {
    display: none;
}

考虑到这一点，请尽量使用CSS。

请注意，您根本没有使用JavaScript，因此这已经发布在错误的部分。请编辑它并删除“javascript”和“jquery”标签。

Answer 2

由于您使用的是Joomla，请替换：

<a href="#tab-1" class="tab">502-831</a>

使用：

<a href="<?php echo JUri::current();?>#tab-1" class="tab">502-831</a>

防止锚跳转到内部链接

2 个答案: