Question

我正在构建一个带有固定侧面导航的网页。但是，当前页面不会突出显示所需的颜色。我在所有导航链接上都有一个“nav-item”，在当前页面上有一个“nav-item current”。我相信html很好，我认为css也很好，但我不明白为什么它不会突出。

.nav-container {
  display: block;
  clear: left;
  padding-top: 35px;
  
}

.navigation {
  width: 75%;
  margin: auto;
  clear: left;
}

.current {
  color: #36d9d3;
}


.nav-item {
  text-decoration: none;
  box-sizing: border-box;
  clear: left;
  float: left;
  display: block;
  margin: 10px;
  font-size: 20px;
  color: black;
  font-family: 'Raleway', sans-serif;
  -webkit-transition: 200ms color ease;
}


.nav-item:hover {
  color: grey;
}

<div class="nav-container">
        <nav class="navigation">
          
          <a class="nav-item current" href="#">Illustrations</a>
          <a class="nav-item" href="#">Designs</a>
          <a class="nav-item" href="#">Artwork</a>
          <a class="nav-item" href="#">Photography</a>
        
        </nav>
      </div>

Answer 1

将!important添加到current的颜色中，因为你的风格已经越过了。对于外部样式表中定义的样式，优先级按从下到上依次为两个相同的属性

＆＃13;

.nav-container {
  display: block;
  clear: left;
  padding-top: 35px;
}
.navigation {
  width: 75%;
  margin: auto;
  clear: left;
}
.current {
  color: #36d9d3 !important;
}
.nav-item {
  text-decoration: none;
  box-sizing: border-box;
  clear: left;
  float: left;
  display: block;
  margin: 10px;
  font-size: 20px;
  color: black;
  font-family: 'Raleway', sans-serif;
  -webkit-transition: 200ms color ease;
}
.nav-item:hover {
  color: grey;
}

＆＃13;

<div class="nav-container">
  <nav class="navigation">

    <a class="nav-item current" href="#">Illustrations</a>
    <a class="nav-item" href="#">Designs</a>
    <a class="nav-item" href="#">Artwork</a>
    <a class="nav-item" href="#">Photography</a>

  </nav>
</div>

＆＃13;

Answer 2

看看这个并得到一个想法。

$(document).on("click", 'ul li', function(){
    $('ul li').removeClass('active');
    $(this).addClass('active');
});

a {
    color:#000;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:visited {
    color:#000;
}
.nav {
    padding:10px;
    border:solid 1px #c0c0c0;
    border-radius:5px;
    float:left;
}
.nav li {
    list-style-type:none;
    float:left;
    margin:0 10px;
}
.nav li a {
    text-align:center;
    width:55px;
    float:left;
}
.nav li.active {
    background-color:green;
}
.nav li.active a {
    color:#fff;
    font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav">
  <li><a href="#tab1">Menu 01</a>
  </li>
  <li>|</li>
  <li><a href="#tab2">Menu 02</a>
  </li>
  <li>|</li>
  <li><a href="#tab3">Menu 03</a>
  </li>
 
</ul>

当前页面链接未突出显示

2 个答案: