鏈接到同一頁面導致頁面跳轉 - 但只有當我將它添加到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

回答

相關問題