활성 메뉴 탭 아래 슬라이딩 화살표

Question

다음은 참조 용입니다. 내가 온 클릭 메뉴의 활성 menu.For 예를 통해 내 화살표 슬라이드를 이동하려는

최고 화살표가 활성화 이동할 것을 일시 정지가 활성화 가리켜 야합니다 기본 화살표를 over.By 밀어 모든 메뉴 onclick에 대한 유사 일시 정지 메뉴의이 세트는 활성 메뉴의 onclick 있도록 탭 설정해야합니다. 항목의 목록은 tabset div 안에 표시되어야합니다. 마찬가지로 모든 Menus.For에 대한이 내가 시도한 코드 아래에 시도하지만 작업을 수행 할 수 없습니다.

코드 조각 :

.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 사람이 솔루션은 나를 해결책이다 알려 아는 찾을 수 없습니다 이 문제를 해결하는 데 시간 이상을 낭비했습니다. 누군가 내게 도움이된다면, 내 일에 대해 감사하게 생각합니다. 미리 감사드립니다.

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

자바 스크립트 코드 :

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