Question

<ul>
<li><a href="#kabinet">item7</a></li>
<li><a href="#kabinet">item6</a></li>
<li><a href="#poker">item5</a></li>
<li><a href="#stolice">item4</a></li>
<li><a href="#sefovi">item3</a></li>
<li><a href="#stampa">item2</a></li>
<li><a href="#reklame">item1</a></li>
</ul>

我想在菜单中创建带有小doen箭头的按钮，当用户点击ITEM3时，箭头将显示在按钮item3上...我是否需要JavaScript，或者可以使用纯css完成？

你知道吗？

这是我的箭头css

.arrow_box { 
    position: relative; 
    background: #29B473; 
    border: 1px solid #2BB570; 
    border-radius: 5px; 
}
.arrow_box:after, .arrow_box:before { 
    top: 100%; 
    left: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
}
.arrow_box:after { 
    border-color: rgba(41, 180, 115, 0); 
    border-top-color: #29B473; 
    border-width: 5px; 
    margin-left: -5px; 
}
.arrow_box:before { 
    border-color: rgba(43, 181, 112, 0); 
    border-top-color: #2BB570; 
    border-width: 6px; 
    margin-left: -6px; 
}

Answer 1

您可以尝试以下代码：

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

最好为元素指定一个类名，以便于管理和减少错误。

Answer 2

可以使用jquery，

完成

只需使用它，

$('ul li a').click(function(){
  $('ul li a').removeClass('arrow_box'); //will remove arrow from other a tags
  $(this).addClass('arrow_box');//will show arrow on the clicked a tag

});

Answer 3

作为替代方案：

$(function(){
    $('ul').on('click', 'li', function(){
        $(this).addClass('arrow_box').siblings().removeClass('arrow_box');
    });
});

演示：http://jsfiddle.net/9hKfD/

或者你的风格：

$(function(){
    $('ul').on('click', 'a', function(){
      $(this).addClass('arrow_box').closest('li')
      .siblings().find('a').removeClass('arrow_box');
    });
});

演示：http://jsfiddle.net/9hKfD/1/

菜单上的箭头处于活动状态时

3 个答案: