作业问题bootstrap
来源：2-7 作业题
qq_一个人一個人_0
2018-09-13 22:02:14
<!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"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>蛋糕商店</title> <!-- Bootstrap --> <link rel="stylesheet" href="CSS/style.css"> <link href="CSS/bootstrap.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <header> <ul class="nav nav-pills cont"> <li role="presentation" class="dropdown actives"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 首页 </a> </li> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 生日 <span class="caret"></span> </a> <ul class="dropdown-menu"> <div class="one"> <span>关系</span> <div class="divider"></div> <li><a href="#">朋友</a></li> <li><a href="#">爱人</a></li> <li><a href="#">姐妹</a></li> </div> <div class="one"> <span>风味</span> <div class="divider"></div> <li><a href="#">巧克力</a></li> <li><a href="#">水果</a></li> <li> </li> </div> </ul> </li> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 婚礼 <span class="caret"></span> </a> <ul class="dropdown-menu"> <div class="one"> <span>关系</span> <div class="divider"></div> <li><a href="#">朋友</a></li> <li><a href="#">爱人</a></li> <li><a href="#">姐妹</a></li> </div> <div class="one"> <span>风味</span> <div class="divider"></div> <li><a href="#">巧克力</a></li> <li><a href="#">水果</a></li> <li> </li> </div> <div class="one"> <span>主旋律</span> <div class="divider"></div> <li><a href="#">心形</a></li> <li><a href="#">卡通</a></li> <li> </li> </div> </ul> </li> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 专用 <span class="caret"></span> </a> <ul class="dropdown-menu"> <div class="one"> <span>关系</span> <div class="divider"></div> <li><a href="#">朋友</a></li> <li><a href="#">爱人</a></li> <li><a href="#">姐妹</a></li> </div> <div class="one"> <span>风味</span> <div class="divider"></div> <li><a href="#">巧克力</a></li> <li><a href="#">水果</a></li> <li> </li> </div> </ul> </li> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 商铺 <span class="caret"></span> </a> <ul class="dropdown-menu"> <div class="one"> <span>关系</span> <div class="divider"></div> <li><a href="#">朋友</a></li> <li><a href="#">爱人</a></li> <li><a href="#">姐妹</a></li> </div> <div class="one"> <span>风味</span> <div class="divider"></div> <li><a href="#">巧克力</a></li> <li><a href="#">水果</a></li> <li> </li> </div> </ul> </li> </ul> </header> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="JS/index.js"></script> </body> </html>
*{
margin: 0;
padding: 0;
}
.actives{
background-color: #F07818;
}
.open{
background-color: #F07818 !important;
}
header{
width: 100%;
height: 60px;
background-color: #5D4B33;
}
.cont{
display: inline-block;
}
.cont > li > a{
border-radius: 0;
}
.cont > li > a,span{
width: 100px;
height: 60px;
text-align: center;
line-height: 40px;
color: #fff;
}
.cont > li > a:hover{
background-color: #F07818;
}
.dropdown-menu{
width: 600px;
height: 200px;
}
.one{
width: 150px;
height: 150px;
display: inline-block;
margin-top: 20px;
margin-left: 25px;
}
.one li{
margin: 10px auto;
}
.one li a{
color: gray;
text-decoration: none;
}
.one li a:hover{
color: #F07818;
}
.one span{
color: #F07818;
font-weight: bold;
font-size: 17px;
}$(function(){
var li = $(".cont > li");
li.click(function(event) {
$(this).addClass('actives').siblings().removeClass('actives');
});
});老师，每点击一次都会给每个导航项加了一个open类，然后覆盖掉了我的active的样式，在bootstrap里面我也找不到在哪，于是我就在我自定义的CSS文件中改变了open类的background-color的属性值，但是在点击的时候还是没有起作用啊，而且我发现自己写的avtive类加在li里面根本就没用，但是加在a上面就有用了，这是为什么
写回答
2回答
-
好帮手慕星星
2018-09-14
是可以添加新的样式，但是如果要把bootstrap里面样式覆盖的话，需要选择器的权重优先于bootstrap里面的哦。所以建议将自己写的样式放在bootstrap样式的下面，这样有的样式可以覆盖掉bootstrap里面的样式。如下：
自己测试下。
0 -
好帮手慕星星
2018-09-14
点击导航项的时候，这是bootstrap里面的样式：
本身就是添加在a标签上面的，所以你也要添加在a标签上面。
祝学习愉快~~
0h018-09-14
相似问题