活动菜单标签下的滑动箭头

Question

以下图片供您参考。

我希望通过积极menu.For例子的onclick菜单的移动我的箭幻灯片暂停除此之外箭头应该从活动转移到同样暂停每个菜单onclick它滑动over.By默认的箭头应指向活跃menu.This设置的菜单应该像tab设置，以便onclick活动menu.List项目应该显示在tabset div内。类似于所有菜单。为此，我尝试了下面的代码但我无法完成任务。

代码段：

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

，我试图谷歌在许多方面，但我可以找不到solution.If任何人知道的解决方案，让我知道solution.I浪费了不止一个小时的时间来解决这个问题。如果有人帮助我，我的工作感激不尽。提前感谢。

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

更多d etail访问此：http://codepen.io/anon/pen/vObmJV

Answer 2

您可以在jQuery的帮助下实现此目的。我使用:after伪元素修改了您的HTML和CSS。

检查下面的例子：

$(function() { 
 
    $('ul.tabs a').click(function() { 
 
    $('ul.tabs li').removeClass('active'); 
 
    $(this).parent('li').addClass('active'); 
 
    }); 
 
});

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