0

タイトルが私の問題をうまく説明しているとは思いません。基本的に、私のナビゲーション バーでは、現在のページを別の色にしたいと考えています。

たとえば、すべてのナビゲーション リンクが黒の場合、ホームの現在のページを赤くします。現在のページ リンクにクラスを指定してから色を定義することでこれを試しましたが、変更されていないようです。

ここに私のコードがあります: http://jsfiddle.net/SCd4h/

    <style>
.box {
text-align: center;
background-color: #F1F2F2;
border: 1.5px #D1D3D4 solid;
border-bottom: 3px solid red;
    margin: 5px;
    padding: 10px;
}
p {
font-size: 15px;
font-family: arial;
color: #585858;
}
.logo {
margin-left:70px;
margin-top: -160px;
}
a:visited {
  text-decoration: none;
  color: black;
  font-weight: normal;
}
a:link {
  text-decoration: none;
  color: black;
  letter-spacing: 500;
}
a:hover {
  text-decoration: none;
  color: #FC3B3B;
  background: white;
}
a:active {
  text-decoration: none;
  color: red;
  font-weight: normal;
}

ul {
list-style-type:none;
margin-right:50px;
margin-top: 60px;
padding:5px;
overflow: hidden;
font-family: 'Paytone One', sans-serif;
font-size: 18px;
}
li {
display:inline;
float:right;
margin-right: 30px;
}
.current {
font-family: 'Paytone One', sans-serif;
font-size: 18px;
color:red;
}
</style>


<body>
<ul>
<li><a href="index.html"/>HOME</a></li>
<li><a href="blog.html"/>BLOG</a></li>
<li><a href="photo.html" class="current"/>PHOTOS</a><li>
<li><a href="projects.html"/>PROJECTS</a></li>
</ul>

</br>
<img class="logo" src="louis2.png" alt="." width="149px" height="150px"/>
<div class="box">

</div>
<div class="box1">
</div>
<p>louismoore.net © All rights reserved 2012</p>
</body>
4

3 に答える 3

5

あなたの問題は特異性です。

試す

a.current代わりは。

また、/開始 A タグ内の from を削除します。構造化する必要があります<a>...</a>

于 2012-12-28T18:41:01.673 に答える
1

I'd suggest a different approach rather than applying a class to the corresponding link for each page as you'll need to change the markup for your nav for each different page. Add a class to the body of each page identifying the page, then add another class to each link, identifying the link, then write css that combines them:

.home .home_link,
.blog .blog_link,
.photos .photos_link,
.projects .projects_link {
    color: red;
}

This way, the css is applied automatically without having to write different markup for the nav for each page.

Here's a jsfiddle to demonstrate.

于 2012-12-28T18:44:15.540 に答える
0

a:link has more specifiers (a tag name AND a pseudo-class) than .current (just a class). You can override it by saying

a.current

since that has a tagName and a class, which overrides a tagName and pseudo-class.

于 2012-12-28T18:43:10.770 に答える