jq如何实现当前元素被点击隐藏同层级其他元素

Question

<span id="jianjie addClass">简介</span>

<span id="lishi">历史</span>

<span id="rongyu">荣誉</span>

<script type="text/javascript">

$(function(){

    $("#lishi").click(function(){

        $(".lishi").addClass("animate");

        $(".jianjie").removeClass("animate");

    });

    $("#rongyu").click(function(){

        $(".rongyu").addClass("animate");

        $(".lishi").removeClass("animate");

    });

})   

</script>

这么写太繁琐了

Answer 1

siblings()

Answer 2

jQ的事件回调里，$(this)就是event.target，即触发事件的DOM对象看下这里边的“遍历”分类，挨个儿都看一遍，你大概就该知道用什么了。

Answer 3

<script type="text/javascript">$(function(){&nbsp; &nbsp; $("#lishi").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; $(this).addClass("animate").siblings().removeClass("animate");&nbsp; &nbsp; });&nbsp; &nbsp; $("#rongyu").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; $(this).addClass("animate").siblings().removeClass("animate");&nbsp; &nbsp; });})&nbsp; &nbsp;</script>

Answer 4

建议可以把节点存储到一个变量中再使用，重复查找节点效率不高。简单来说，原理就是 this当前的隐藏，然后遍历兄弟节点实现效果。

Answer 5

百度一下“事件委托”就知道了