作业问题bootstrap
<!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上面就有用了，这是为什么
0
收起
正在回答 回答被采纳积分+1
2回答
相似问题
登录后可查看更多问答，登录/注册
响应式开发与常用框架 2018
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星