链接到同一页面导致页面跳转 - 但只有当我将它添加到magento

因此，我正在为其上有手风琴（纯CSS）的客户端开发一个页面。链接到同一页面导致页面跳转 - 但只有当我将它添加到magento

它工作正常，但是当我将它添加到magento（一个我从未用过的CMS）时，一切正常，但是当您单击链接打开手风琴时，它会跳转到该页面的顶部。

这里的HTML：

<div id="accordion"> 
    <ul> 

    <li ><a href="#one">CHICKEN MARINADES</a> 
     <div id="one" class="accordion"> 

jdv[oifdj 

     </div> 
    </li> 
    <li> 
     <a href="#two">PORK MARINADES</a> 
     <div id="two" class="accordion"> 
     dpifhd[foivh 
     </div> 
    </li>  
    <li> 
     <a href="#three">BEEF MARINADES</a> 
     <div id="three" class="accordion"> 
     gfspiuqdhsv; 
     </div> 
    </li> 
    </ul> 
</div>

而这里的CSS：

#accordion{margin:10px auto; max-width:600px;} 
#accordion ul{list-style:none;margin:0;padding:0;} 
.accordion{display:none;} 
.accordion:target{display:block;} 
#accordion ul li a{text-decoration:none;display:block;padding:2px;} 
.accordion{padding:4px;} 

/* Colors 
====================*/ 
#accordion ul{ 
/*box-shadow*/ 
-webkit-box-shadow:0 4px 10px #BDBDBD; 
    -moz-box-shadow:0 4px 10px #BDBDBD; 
     box-shadow:0 4px 10px #BDBDBD; 
/*border-radius*/ 
-webkit-border-radius:5px; 
    -moz-border-radius:5px; 
     border-radius:5px; 
} 
#accordion ul li a{ 
background:#fff; 

color:#999; 
} 
.accordion{ 
background:#fdfdfd; 
color:#999; 
}

有谁知道如何阻止这种情况发生在红色？

*****编辑***** 忘了提，没有JS（此刻 - 但是我接受它！）

来源

2015-07-21 Peter Kirkwood

我会建议JS需要在事件上返回false或preventDefault。你能展示JS吗？ –

@DouglasRadburn谢谢。目前没有JavaScript ...这只是CSS。我想知道JS是否会这么做，但恐怕我不太清楚！我的谷歌搜索引起了返回false和preventDefault，但我无法弄清楚如何实现它们！ –

问题是这一行：

.accordion:target{display:block;}

即使当我试图使用JS来停止页面跳跃它弄乱了其他事情。

我已经实现了一个全新的使用JS的手风琴，并对它进行了排序！

来源

2015-07-22 12:41:55

链接到同一页面导致页面跳转 - 但只有当我将它添加到magento

回答

相关问题