Question

我制作了一个带有箭头的菜单，该箭头在所点击的项目下滑动。箭头是带有“标记”类的div。

HTML：

<div class="services-block">
  <div id="services-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner services" role="listbox" >
      <div class="item active" id="services">
        <ul class="tabbed-menu menu-list">
          <li><a href="javascript:rudrSwitchTab('tb_1', 'content_1');" id="tb_1" class="tabmenu active">Consultanță IT</a></li>
          <li><a href="javascript:rudrSwitchTab('tb_2', 'content_2');" id="tb_2" class="tabmenu">Managementul Relațiilor cu Clienții</a></li>
          <li><a href="javascript:rudrSwitchTab('tb_3', 'content_3');" id="tb_3" class="tabmenu">Business Intelligence</a></li>
          <li><a href="javascript:rudrSwitchTab('tb_4', 'content_4');" id="tb_4" class="tabmenu">Turism și Ospitalitate</a></li>
          <li><a href="javascript:rudrSwitchTab('tb_5', 'content_5');" id="tb_5" class="tabmenu">Finanțe și Bănci</a></li>
          <li><a class="right carousel-control" href="#services-carousel" role="button" data-slide="next">Mai multe <img src="images/right-arrow.png" alt=""></a></li>
       </ul>                 
     </div> <!--/.item active-->

   </div> <!--/.carousel-inner-->
   <div id="marker"></div>
 </div> <!--/#services-carousel-->
</div> <!--services-block-->

jQuery的：

  $("#services ul > li").click(function(event){
    var position = $(this).position();
    var width    = Math.round($(this).width()/2) - 5;
    $("#marker").css('left', 'auto').transition({ x: position.left + width });
    event.preventDefault();
  })

因此，当页面加载时，标记向左移动14％，以便低于项目的中心。我在jQuery中删除了这个样式，因为当单击另一个项目时，会添加这些14％并且标记不会滑动到下一个项目的中心。这就是问题，当我点击下面的项目时，左边的属性被设置为auto，这使得箭头向左滑动，靠近div的左边缘，id为'services'，宽度为100％，然后它在点击的同一性的中心下方滑动。所以，我希望箭头移动到下一个项目，而不是先向左滑动。有谁知道如何解决这个问题？

CSS：

#marker {
background: transparent url("http://cdn7.unit4.com/images/theme/2014/icons/down.png") no-repeat scroll 50% 50%;   
height: 16px;
left: 14%;
position: absolute;
z-index: 1;
width: 45px;}

Answer 1

如下所示修改脚本，如果希望标记平滑移动，可以添加css过渡效果。我用你的代码和一些随机的css

创建了一个工作示例HERE

$("#services ul > li").click(function(event){
    var position = $(this).position().left;
    var width = Math.round($(this).width()/2) - 5;
    var arrowPos = position + width;
    $('#marker').css('left', arrowPos);
    event.preventDefault();
  });

菜单项

1 个答案: