Question

我有导航栏。我想在激活的菜单中加下划线链接。怎么样？

＆＃13;

.nav a:active {
  text-decoration: underline;
}
.nav a:active {
  background-color: red!important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-header">
    <a class="navbar-brand" href="/">info</a>
  </div>
  <ul class="nav navbar-nav">
    <li><a href="/main">Main site</a>
    </li>
    <li><a href="/login">/login</a>
    </li>
    <li><a href="/first">/first</a>
    </li>
    <li><a href="/second">/second</a>
    </li>
    <li><a href="/third">Sport</a>
    </li>
    <li><a href="/fourth">fourth</a>
    </li>
  </ul>
</nav>

＆＃13;

但它不起作用。我搜索类似的主题，但我没有找到好的解决方案。

Answer 1

我认为您的代码已经改变了活动颜色。但我相信你正在考虑bootstrap的活跃元素。

如果要在单击元素时更改元素的功能，则使用CSS ：活动选择器（单击并按住时可以看到效果）。在bootstrap中添加，

class="active"

元素上的样式将根据您的页面而改变。看看我如何修改CSS？这将改变您所在页面的活动元素的背景。

.nav a:active {
  text-decoration: underline;
}

.nav a:active {
  background-color: red !important;
}


/* Notice how we added an id? This let's us
   be more specific and override the bootstrap selector
*/
.navbar > #my-nav > .active > a {
  background-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">info</a>
  </div>
  <ul id="my-nav" class="nav navbar-nav">
    <li class="active"> <a href="#">Main site</a> </li>
    <li> <a href="#">login</a> </li>
    <li> <a href="#">first</a> </li>
    <li> <a href="#">second</a> </li>
    <li> <a href="#">Sport</a> </li>
    <li> <a href="#">fourth</a> </li>
  </ul>
</nav>

<script   src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

附注：在您的网站上有不同的网页后，背景不会改变。例如，你会改变，

<li class="active"> <a href="home.html">Main site</a> </li>

然后，只要您从其他页面点击它，它就会将背景更改为红色。

Answer 2

你需要使用php才能得到你想要的东西。

首先给每个页面命名：

<?php $page='home'; ?>

然后转到导航并将以下内容添加到导航

 <li><a <?php if($page == 'Home') {echo 'class="active"';} ?> href="index.php">Home</a></li>

最后在ur css中创建一个名为active的样式并将其设置为

的样式

.active{
text-decoration: underline;
}

这应该可以解决问题

Navbar - 如何下划线或更改颜色活动链接？

2 个答案: