3

シンプルなブートストラップ トップ固定ナビゲーション バーを使用しており、アクティブなページの色を変更したいのですが、コードに何かが欠けていると思います

<div class="navbar">
    <div class="navbar-fixed-top">
      <div class="container" style="width: auto;">
          <div class="nav-collapse" id="nav-collapse">
          <ul class="nav" id="nav">
            <li class="active"><a href="#skdill" >skisll</a></li>
            <li class="active"><a href="#skill">skill</a></li>
            <li class="active"><a href="#research">research</a></li>
            <li class="active"><a href="#">Link</a></li>
                     </ul>
        </div>
      </div>
    </div>
  </div>

CSSは

.navbar {
    position: fixed;
    width: 100%;
}
.navbar .nav {
   float: none;
}
.navbar .nav>li {
    width: 25%;
}
.content {
    padding-top: 80px;
}

#nav-collapse li a:hover { 
    color: blue; 
}
#nav-collapse a:hover { 

    background-color: gray; 
}

#nav-collapse  li.active { 
   color:green;
    background-color: yellow; 
}
#nav-collapse  li.active a {
    color: red;
}

...たとえば、(アクティブなナビゲーション項目の) テキストを赤く、背景色を灰色にしたい (なんでも) ... アイデアはありますか?

どうもありがとう！

4

4 に答える 4

1 
.navbar #nav > .active > a {
    color: red;
}

ここにデモがあります

于 2013-04-07T18:47:03.450 に答える
0

このjsは私にとってはうまくいきました。ナビゲーションがphpインクルードである各ページに配置しました：

 <script>
 $(function() { 

        var path = window.location.pathname;
        path = path.replace(/\/$/, "");
        path = decodeURIComponent(path);

        $(".nav li a").each(function () {
            var href = $(this).attr('href');
            if(path.substring((path.lastIndexOf('/')+1),path.lenght) === href) {    
                $(this).closest('li').addClass('active');
            } else {
                $(this).closest('li').removeClass();
            }
        });         
 });

于 2015-11-21T10:26:03.570 に答える