0

借助来自网络的资源，我使用纯 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;
}
4

2 回答 2

0

要保留您的 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;" />
于 2013-08-07T15:20:08.907 回答
-1

在您希望禁用默认行为的元素上，使用preventDefault.

JavaScript：

var areas = $(document).querySelectorAll('area[href^="#"]'), i;

for(i = 0; i < areas.length; i+=1) {
    areas[i].addEventListener('click', function(e) {
        e.preventDefault();
    }, false);
}
于 2013-08-07T15:24:46.010 回答