js实现一个页面底部导航点击图片高亮显示

最新推荐文章于 2021-06-09 11:54:39 发布

原创最新推荐文章于 2021-06-09 11:54:39 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

前端专栏收录该内容

34 篇文章

订阅专栏

本文介绍如何利用JavaScript实现页面底部导航栏在点击时实现对应的图片高亮显示，适用于单页面应用，简化多页面场景下的逻辑代码。鼓励读者思考并动手实践，共创简单效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML
<footer>
    <div>
        <ul class="navbar" id="navbar">
            <li>
                <img src="./icon_more_selected.png"/></br>
                    <span>任务</span>
             </li>
            <li>
                 <img src="./icon_promote.png" /></br>
                    <span>收徒</span>
            </li>
            <li>
                 <img src="./icon_mine.png" /></br>
                    <span>我的</span>
             </li>
        </ul>
    </div>

</footer>

布局看自己心情吧~

SCRIPT  
$('#navbar').click(function(event) {

            if(event.target.tagName === 'IMG'){
                var nodes = $('#navbar li img');
                for(var i=0; i<nodes.length; i++){
                    nodes[i].src = nodes[i].src.replace(/.png|_selected.png/,'.png');
                }
                event.target.src = event.target.src.replace(/.png|_selected.png/,'_selected.png');
            }}
        )