js动态修改bootstrap的css样式，无效？

js动态修改bootstrap的css样式，结果被默认样式覆盖啦？<!DOCTYPEHTML><html><head><metacharset="utf-8"><meta... js动态修改bootstrap的css样式，结果被默认样式覆盖啦
？
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>基本用法</title>
<link rel="stylesheet" href="../bs-3.3.7/css/bootstrap.min.css">
<script src="../js/jquery-1.7.2.min.js"></script>
<script src="../js/jquery-2.0.0.min.js"></script>
<script src="../bs-3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
ul>li{
cursor: pointer;
border:1px solid #eeeeee;
}
.bg-color{
display:block;
background:#00FFFF;
}

</style>
</head>
<body>
<ul class="nav nav-pills">
<li class=""><a href="#">首页</a></li>
<li><a href="#">产品参数</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">技术支持</a></li>
<li><a href="#">联系</a></li>
</ul>

<script>
$("li").click(function () {
$(this).addClass("bg-color").siblings().removeClass("bg-color");

})

</script>
</body>
</html> 展开

 我来答

2个回答

#热议# 生活中有哪些实用的心理学知识？

每日小姐姐推荐
2018-07-30 · 爱生活，爱美女，正能量美女推荐

每日小姐姐推荐

采纳数：77 获赞数：80

向TA提问私信TA

关注

展开全部

你js动态修改是成功了的；点击是增加了bg-color类的。但是
bootstrap里的导航点击颜色是
.nav>li>a:focus, .nav>li>a:hover{}这个；
你写的是加在上级li上面的。li下面的a点击是有颜色所以覆盖掉了。
解决方法1；
把.nav>li>a:focus, .nav>li>a:hover{background-color：none}去掉默认点击设置的颜色。
或者直接修改 .nav>li>a:focus, .nav>li>a:hover{background-color：这里设置颜色}，不需要点击增加类。
2、把点击增加类的时间添加到a上面；然后设置 .nav>li>a.bg-color:hover{}

本回答被网友采纳

已赞过已踩过<

你对这个回答的评价是？
评论收起