HTML 禁用 'id' 页面移动行为

Question

利用来自网络的资源，我使用纯 CSS 和 HTML 创建了一个幻灯片放映。单击图像映射上的链接会更改旁边对齐的 div 的内容。

为了实现这一点，我将 'href="#"' 链接到 'id=""'。然而，这会在页面上产生“书签”效果，它会自动将页面向下滚动到“id”所在的 div 的顶部。

我已经设法让它运行良好，但是，是否可以禁用页面向下滚动的行为但保持相同的功能？

谢谢!

代码:

HTML

<div class="wheelContainer" id="content-slider">
    <ul id="content-slider-inside"> 
        <li id="middle"></li>
        <li id="customer"></li>
        <li id="people"></li>
        <li id="operations"></li>  
        <li id="finance"></li>  
        <li id="community"></li>  
    </ul> 
</div>

<img src="/teams/group-itservice/businesssupport/images/wheel.png" usemap="#Map" border="0" />
<map name="Map" id="Map"><area shape="poly" coords="392,446,295,310,322,276,320,234,478,179,477,332" href="#operations" alt="operations" />
  <area shape="poly" coords="127,446,222,312,260,324,297,311,391,449,252,495" href="#finance" alt="finance" />
  <area shape="poly" coords="218,310,121,446,40,342,40,178,196,235,194,276" href="#community" alt="community" />
  <area shape="poly" coords="259,193,259,27,126,67,41,179,197,234,219,204" href="#customer" alt="customer" />
  <area shape="poly" coords="258,26,259,193,297,207,321,237,475,179,393,70" href="#people" alt="people" /> 
  <area shape="circle" coords="258,258,62" href="#middle" alt="middle" />
</map>

CSS

#content-slider {  
    width: 480px;  
    overflow: hidden;  
    height: 515px;  
}

#content-slider-inside {  
    list-style: none;  
    height: 515px;      // these 3 lines  
    overflow: scroll;   // help Opera  
    overflow-y: hidden; // behave
}  

#content-slider-inside li {  
    width: 350px;  
    height: 515px;  
    padding-top:50px;
    padding-left:20px;
}

Answer 1

要保留您的 ID 引用，您可以让 onClick 返回 false。这应该会阻止页面滚动，但这是否会破坏您的其他操作？

<area shape="poly" coords="127,446,222,312,260,324,297,311,391,449,252,495" href="#finance" alt="finance" onClick="return false;" />