在活动菜单选项卡下滑动箭头

Question

以下是供参考的图片。

我想将箭头滑动到活动菜单上。例如，单击菜单暂停，顶部箭头应从活动状态移动到暂停状态，类似地，每个菜单onclick都会滑过。默认箭头应指向活动菜单。这组菜单应该像标签设置一样，以便活动菜单的onclick。项目列表应显示在tabset div内。类似于所有菜单。为此我尝试下面的代码但我无法完成任务。

代码段：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我在很多方面尝试了谷歌但我无法找到解决方案。如果有人知道解决方案让我知道解决方案。我浪费了一个多小时来解决这个问题。如果有人帮助我，那就是感激我的工作。谢谢。

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

Answer 2

您可以借助:after来实现这一目标。我使用$(function() { $('ul.tabs a').click(function() { $('ul.tabs li').removeClass('active'); $(this).parent('li').addClass('active'); }); });伪元素修改了您的HTML和CSS。

检查以下示例：

.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 {
  position: relative;
  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;
  cursor: pointer;
}
.db-new-filters .tabs li.active::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 10px;
  margin-top: -10px;
  left: calc(50% - 10px);
  border-bottom: 10px solid #dddddd;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="db-new-filters">
  <ul class="tabs js-db-status-tabs">
    <li class="active">
      <a>Active</a>
    </li>
    <li>
      <a>Paused</a>
    </li>
    <li>
      <a>Pending</a>
    </li>
    <li>
      <a>Unapproved</a>
    </li>
  </ul>
</div>

css