我正在尝试使用 bootstrap 构建一个网页,其标题看起来或多或少像 w3schools。为了方便起见,我附上了显示它们的图像文件。
正如您在黄色栏中看到的,我有外观,而且当我突出显示该条目时,它也会变成黑色。但是,如果单击 W3Schools,条目会变为绿色。因此,如果我正在查看 HTML turorial,它会以绿色显示 HTML 菜单条目。如何使用 Bootstrap 实现这一点?
我有这个 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/custom_styles.css"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top"> <!-- PavanD: navbar-static-top helps in removing the rounded navbar.-->
<div class="container-fluid" style="background-color:#5F5F5F;"> <!--505050 can also be considered -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id=headerEntries class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="index.html"><span class="glyphicon glyphicon-home"></span></a></li>
<li><a href="#">CONCEPTS</a></li>
<li><a href="#">C</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">JAVA</a></li>
<li><a href="#">ORACLE</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">REACH US</a></li>
<li><a href="about.html">ABOUT</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
我想出了这个 CSS。
.navbar-inverse .navbar-nav > li > a {
font-family: sans-serif;
color: #ffffff; /* PavanD: This is the color of the elements when they load. */
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
background-color: #000000; /* PavanD: When you click the top menu items, they have to be rendered in black.*/
color: #ffffff; /* PavanD: This is the color of the elements when they are clicked. We want it to be white so this.*/
}
.navbar-inverse .navbar-nav > li > a:active {
background-color: #8AC007; /* PavanD: When you click the top menu items, they have to be rendered in black.*/
color: #ffffff; /* PavanD: This is the color of the elements when they are clicked. We want it to be white so this.*/
}
但只有在我按下某个按钮后它才会显示绿色。例如,如果我在主页上单击“关于”页面,它会立即显示绿色并恢复为灰色。 我是网络编程的新手,我在想这是否是使用 java 脚本 [?] 完成的,但不确定。任何输入都会有很大帮助。
下面好像是w3页面的css。它使用自己的 w3.css。 .topnav a.active { 背景色:#8AC007; 颜色:#FFF;
对于 w3schools 页面,我可以看到我单击的链接的状态将变为事件状态。更具体地说,如果我点击 HTML 类(class),我可以看到
<div style="overflow:auto;">
<div style="float:left;width:50%;overflow:hidden;height:44px">
<a href="javascript:void(0);" class="topnav-localicons w3-hide-large w3-left" onclick="open_menu()" title="Menu">☰</a>
<a href="/default.asp" class="topnav-icons fa fa-home w3-left" title="Home"></a>
<a href="/html/default.asp" class="**active**" title="HTML Tutorial">HTML</a>
<a href="/css/default.asp" class="w3-hide-small" title="CSS Tutorial">CSS</a>
<a href="/js/default.asp" class="w3-hide-small" title="JavaScript Tutorial">JAVASCRIPT</a>
应该怎么做?这是 javascript 吗?
非常感谢。
帕文。
编辑:一个小小的 jquery 发挥了魔力。
<script>
$(document).ready(function(){
var pathname = this.location.pathname;
if ( pathname.indexOf('about') > -1 )
{
$( "#about_home" ).addClass("active");
}
else if ( pathname.indexOf('concepts_explore') > -1 )
{
$( "#concepts_home" ).addClass("active");
}
else if ( pathname.indexOf('c_explore') > -1 )
{
$( "#c_home" ).addClass("active");
}
else if ( pathname.indexOf('cpp_explore') > -1 )
{
$( "#cpp_home" ).addClass("active");
}
else if ( pathname.indexOf('java') > -1 )
{
$( "#java_home" ).addClass("active");
}
else if ( pathname.indexOf('ds_explore') > -1 )
{
$( "#ds_home" ).addClass("active");
}
else if ( pathname.indexOf('sql_explore') > -1 )
{
$( "#sql_home" ).addClass("active");
}
});
</script>
最佳答案
这是用于事件状态的 CSS:参见工作示例。
.navbar.navbar-inverse .navbar-nav > .active,
.navbar.navbar-inverse .navbar-nav > .active > a,
.navbar.navbar-inverse .navbar-nav > .active > a:hover,
.navbar.navbar-inverse .navbar-nav > .active > a:focus {
background-color: #8AC007;
color: #FFF;
}
.navbar.navbar-inverse .navbar-nav > li > a {
font-family: sans-serif;
color: #ffffff;
/* PavanD: This is the color of the elements when they load. */
}
.navbar.navbar-inverse .navbar-nav > li > a:hover,
.navbar.navbar-inverse .navbar-nav > li > a:focus {
background-color: #000000;
/* PavanD: When you click the top menu items, they have to be rendered in black.*/
color: #ffffff;
/* PavanD: This is the color of the elements when they are clicked. We want it to be white so this.*/
}
.navbar.navbar-inverse .navbar-nav > li > a:active {
background-color: #8AC007;
color: #ffffff;
}
/***Link Background and Color Active State***/
.navbar.navbar-inverse .navbar-nav > .active,
.navbar.navbar-inverse .navbar-nav > .active > a,
.navbar.navbar-inverse .navbar-nav > .active > a:hover,
.navbar.navbar-inverse .navbar-nav > .active > a:focus {
background-color: #8AC007;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top">
<!-- PavanD: navbar-static-top helps in removing the rounded navbar.-->
<div class="container-fluid" style="background-color:#5F5F5F;">
<!--505050 can also be considered -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id=headerEntries class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span></a>
</li>
<li><a href="#">CONCEPTS</a>
</li>
<li><a href="#">C</a>
</li>
<li><a href="#">C++</a>
</li>
<li><a href="#">JAVA</a>
</li>
<li><a href="#">ORACLE</a>
</li>
<li><a href="#">FAQs</a>
</li>
<li><a href="#">REACH US</a>
</li>
<li><a href="about.html">ABOUT</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a>
</li>
</ul>
</div>
</div>
</nav>
关于javascript - 给 Bootstrap 菜单上色并激活它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32931863/