Schiebepfeil unter dem aktiven Menü Tab

Question

Hier ist das Bild für Ihre Referenz.

Ich möchte meinen Pfeil gleiten über aktive menu.For Beispiel bewegen Onclick Menü pausiert, dass Top-Pfeil aus dem aktiven bewegen sollte in ähnlicher Weise jedes Menü pausiert onclick es Standard Pfeil schieben over.By sollte aktiv Punkt menu.This Set von Menü sollte wie Registerkarte eingestellt sein, so dass onclick des aktiven Menüs.Liste der Elemente sollte in Tabset div.Similarly für alle Menüs angezeigt werden.Für diese versuchte ich unten Code Aber ich kann die Aufgabe nicht erreichen.

Code Snippet:

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

und ich versuchte google in vielerlei Hinsicht Aber ich das nicht finden können solution.if jemand kennt mich die Lösung informieren, die solution.I verschwendet mehr als eine Stunde, um dieses Problem zu lösen.Wenn jemand mir helfen, ist dankbar für meine Arbeit.Vielen Dank im Voraus.

Answer 1

Verwenden Sie diesen Code.

Html-Code:

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

#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-Code:

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

für mehr d Gehen Sie dazu wie folgt vor: http://codepen.io/anon/pen/vObmJV

Answer 2

Sie können dies mit Hilfe von jQuery erreichen. Ich habe Ihre HTML und CSS mit :after Pseudo-Element geändert.

prüfen unten Beispiel:

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