Question

Hy，我有一个水平的CSS菜单。单击选项卡时，我执行切换以在css选定的类之间切换。这个类只删除了底部边框并为字体着色，所以它看起来像是一个活动的标签。这很好，问题是，当我点击活跃的同一个标签时，我不想再次切换。

示例：

- ＆GT;点击回家 - ＆GT; | 主页 |标签已选中。 - ＆GT;再次点击主页 - ＆GT; |主页|选项卡取消选中。

这是准备就绪的代码：

$('#tabmenu li').click(function(e) {

$(this).toggleClass("clicked");
    $("#tabmenu li").not(this).removeClass("clicked");      

  });

CSS：

#tabmenu li.clicked {
             /*remove a piece of UL bottom-border*/
                             border-bottom: 1px solid #fff; 
             margin-bottom: -1px;

                             /*make it show active*/
             border-top:1px solid #7C798E;
             border-left:1px solid #7C798E!important;
             border-right:1px solid #7C798E;
         }   
         #tabmenu li.clicked a { color:#000070;}

PS。

我想做类似的事情：

... //你是哪个元素 ... //临时保存 .... //你跟上一个一样吗？ .....是吗？ - ＆GT;什么也不做，不 - ＆gt;切换。

有更明亮的方法吗？谢谢。

Answer 1

您可以添加一个条件语句，检查点击的li node是否已有类clicked。

$('#tabmenu li').click(function(e) {
    var $self = $(this);

    if( !$self.hasClass('clicked') )
         $self.addClass("clicked").siblings().removeClass('clicked');      
});

调整整个事情。

参考文献：.hasClass()，.siblings()

jquery防止双击相同的元素

1 个答案: