鍍金池/ 問答/HTML/ jq如何實現(xiàn)當(dāng)前元素被點擊隱藏同層級其他元素

jq如何實現(xiàn)當(dāng)前元素被點擊隱藏同層級其他元素

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

這么寫太繁瑣了

回答
編輯回答
萌小萌
  1. jQ的事件回調(diào)里，$(this)就是event.target，即觸發(fā)事件的DOM對象
  2. 看下這里邊的“遍歷”分類，挨個兒都看一遍，你大概就該知道用什么了。
2018年1月7日 15:03
編輯回答
檸檬藍

siblings()

2017年1月12日 12:41
編輯回答
茍活

可以使用slblings()來選擇兄弟節(jié)點。傳送門-去JSRUN看看效果

<span id="jianjie" class="item">簡介</span>
<span id="lishi" class="item">歷史</span>
<span id="rongyu" class="item">榮譽</span>
<script type="text/javascript">
$(function(){
    $(".item").off().on('click',function(){
        $(this).addClass("animate").siblings().removeClass('animate')
    });
})   
</script>
2018年7月27日 15:15
編輯回答
陌璃

建議可以把節(jié)點存儲到一個變量中再使用，重復(fù)查找節(jié)點效率不高。簡單來說，原理就是 this當(dāng)前的隱藏，然后遍歷兄弟節(jié)點實現(xiàn)效果。

2017年3月6日 06:45
編輯回答
卟乖

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

2018年7月1日 23:10
編輯回答
膽怯
<script type="text/javascript">
$(function(){
    $("#lishi").click(function(){
        $(this).addClass("animate").siblings().removeClass("animate");
    });

    $("#rongyu").click(function(){
        $(this).addClass("animate").siblings().removeClass("animate");
    });

})   
</script>
2018年2月19日 11:03
編輯回答
黑與白
<span id="jianjie addClass" class="list">簡介</span>
<span id="lishi" class="list">歷史</span>
<span id="rongyu" class="list">榮譽</span>
<script type="text/javascript">
$(function(){
    $(".list").click(function(){
        $(this).addClass("animate").siblings().removeClass("animate");
    });

})   
</script>
2018年5月29日 20:52