【ul li a】JQ实现选择导航栏列表项改变样式

本文主要是介绍【ul li a】JQ实现选择导航栏列表项改变样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 HTML

<div class="_navbar"><h2>Django</h2><ul><li><a href="#">Django简介</a></li><li><a href="#">Django环境配置</a></li><li><a href="#">Django项目开发</a></li></ul>
</div>

CSS

a {color: #FC8C00;text-decoration: none;
}a:hover {color: #FFA422;
}/* 选中的列背景样式  */
.choose {background-color: #FFA422;
}/* 选中的列a标签文字样式  */
.astyle {color: #FFFFFF;
}/* 选中的列a标签鼠标悬浮文字样式  */
.astyle:hover {color: #000000;
}

JQ

$(document).ready(function() {$("._navbar ul li").click(function() {$(this).addClass("choose").siblings().removeClass("choose");$(this).children().addClass("astyle").parent().siblings().children().removeClass("astyle");});
});

 

这篇关于【ul li a】JQ实现选择导航栏列表项改变样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---