版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/tsoTeo/article/details/85161351
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");
});
});