javascript - Activity 菜单选项卡下的滑动箭头

Question

这是供您引用的图片。

我想将我的箭头滑过 Activity 菜单。例如，菜单的 onclick 暂停，对于每个菜单 onclick 它滑过，顶部箭头应该从 Activity 状态移动到暂停状态。默认情况下，箭头应该指向 Activity 菜单。这组菜单应该像选项卡集，以便单击 Activity 菜单。元素列表应该显示在选项卡集 div 内。对于所有菜单都类似。为此，我尝试了下面的代码，但我无法完成任务。

代码 fragment :

.db-new-filters {
  margin-bottom: 20px;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.db-new-filters .tabs {
  border-bottom: 1px #dddddd solid;
  position: relative;
}
ul,
ol,
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}
.db-new-filters .tabs li:first-child {
  margin-left: 0;
}
.db-new-filters .tabs li {
  display: inline-block;
  margin-left: 11px;
  -webkit-transition: left 0.3s;
  -moz-transition: left 0.3s;
  -o-transition: left 0.3s;
  transition: left 0.3s;
}
.db-new-filters .tabs li a {
  padding: 3px 5px 10px 5px;
  color: #999999;
  font-size: 14px;
  line-height: 42px;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
}
.db-new-filters .tabs li.pointer {
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
  left: 10px;
  bottom: 0;
  margin: 0;
  border-bottom: 10px solid #dddddd;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

<div class="db-new-filters">
  <ul class="tabs js-db-status-tabs">
    <li><a>Active</a>
    </li>
    <li><a>Paused</a>
    </li>
    <li><a>Pending</a>
    </li>
    <li><a>Unapproved</a>
    </li>
    <li class="pointer" style="left: 193.5px;"></li>
  </ul>
</div>

我尝试了很多谷歌但我找不到解决方案。如果有人知道解决方案，请告诉我解决方案。我浪费了一个多小时来解决这个问题。如果有人帮助我，我将感激我的工作.提前致谢。

Answer 1

使用此代码。

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">Menu nav 1</a></li>
          <li><a href="javascript:rudrSwitchTab('tb_2', 'content_2');" id="tb_2" class="tabmenu">Menu navigation 2</a></li>
          <li><a href="javascript:rudrSwitchTab('tb_3', 'content_3');" id="tb_3" class="tabmenu">Menu navigation 3</a></li>
          <li><a href="javascript:rudrSwitchTab('tb_4', 'content_4');" id="tb_4" class="tabmenu">Menu nav 4</a></li>
          <li><a href="javascript:rudrSwitchTab('tb_5', 'content_5');" id="tb_5" class="tabmenu">Menu navigation 5</a></li>
          <li><a class="right carousel-control" href="#services-carousel" role="button" data-slide="next">Menu nav 6</a></li>
       </ul>                 
     </div> <!--/.item active-->

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

CSS 代码:

#services-carousel, #services {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
ul {
  overflow:hidden;
  padding: 0;
}
li {
  float: left;
  list-style-type: none;
  padding: 10px 20px;  
}
a {
  text-decoration: none;
  color: #666;
  font-size: 18px;
}
#marker {
background: transparent url("http://cdn7.unit4.com/images/theme/2014/icons/down.png") no-repeat scroll 50% 50%;   
height: 16px;
left: 4%;
position: absolute;
z-index: 1;
width: 45px;
transition: .4s left ease-in;
}

Javascript 代码:

 $("#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();
  });

有关更多详细信息，请访问:http://codepen.io/anon/pen/vObmJV