我在我的网络应用程序中使用了bootstrap,如何在导航栏中使当前页面链接无法点击?
我想在每个页面上包含相同的标题,但只允许网站名称可点击,因为它会链接到主页。
因此,在我的示例中, HOME 文字将无法点击,并且在悬停时不会突出显示,但 TEST SITE 将是可点击的并具有悬停效果。
有没有办法格式化来实现这个目标?
修改
<a class="navbar-brand" href="../Main.aspx">Test Site | Home</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="About.aspx">About</a></li>
这是相关的css:
.navbar-brand {
float: left;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
@media (min-width: 768px) {
.navbar > .container .navbar-brand {
margin-left: -15px;
}
}
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
border: 1px solid transparent;
border-radius: 4px;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
@media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
答案 0 :(得分:2)
因此,只需将导航栏部分包含在<a>
中的单独标记中,将<span>
中的导航栏部分包含在navbar-brand
类
<a class="navbar-brand" href="../Main.aspx">Test Site</a><span class="navbar-brand"> | Home</span>