2

メニューで選択したページ リンクのフォントの色を #EE4D10 にしようとしています。別のページに移動するまでその色を保持することになっています。次に、新しいページのリンクが強調表示されます。

使用されたCSSコード:

ul.links {
    margin: 0;
}

ul.links li {
    list-style: none;
    padding: 8px 0;
}

ul.links li a, ul.links li a:hover {
    padding: 0 0 0 28px;
    background: transparent url(../images/page.png) no-repeat left center;
    color: #06C4E6;
    text-decoration: underline;
} 

ul.links li a:hover {
    color: #5D5D5D;
    text-decoration: none;
} 

#nav, #nav ul {
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 35px;
    font: 115% helvetica;
}

#nav a {
    color: #2F80AF;
    display: block;
    text-decoration: none;
    list-style-type: none;
}

#nav li, #nav li.last {
    float: left;
    border-right: 1px solid #FFF;
    display: block;
    padding: 0;
    margin: 0;
    height: 35px;
}

#nav li.last {
    border-right: 0px;
}

#nav li a, #nav li.last a {
    padding: 9px 0;
    width: 175px;
    text-align: center;  
    height: 15px;
}

#nav li.last a {
    width: 176px;
}

#nav li ul {
    position: absolute;
    background: #e3eff7;
    font: 100% arial;
    width: 100%;
    left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
}

#nav a:hover {
    color: #FFF;
}

#nav li:hover, #nav li.sfhover {
    background: #00AFD8;
}

#nav li li:hover {
    background: #00AFD8;
}

#nav li li {
    border-bottom: 1px solid #FFF;
    width: 100%;
    padding: 0;
    display: block;
    float: left;
    height: auto;
}

#nav li li a {
    padding: 10px 43px 10px 43px;
    width: auto;
    height: auto;
}

#nav li:hover, #nav li.hover {
    position: static;
}

使用される HTML (すべてのページで同じ):

<ul id="nav">
  <li class="selected"><a href="hypnose.php">Hypnose</a></li>
  <li><a href="toepassing.php">Toepassing</a></li>
  <li><a href="FAQ.php">Veelgestelde vragen</a></li>
  <li><a href="Afspraak.php">Start met veranderen!</a></li>
  <li class="last"><a href="contact.php">Contact</a></li>
</ul>

ウェブサイトはこちらです。誰でもこれで私を助けることができますか？

4

1 に答える 1

0

selected最初の要素に css クラスが適用されていることがわかりましたli。たとえば、次のように、それを利用するだけです。

#nav li.selected a
{
    color: #EE4D10;
}

編集：

もちろん、selectedクラスが適切なli要素に適用されるようにするためのコードが必要です。その間、私は自分でいくつかの調査を行いましたが、まだ機能していません。これは、php スクリプトで直接行うことができます。これは、それを実現するための最良の方法です。または、何らかの理由でスクリプトを編集できない場合は、代わりに JavaScript を追加して、「実行時に」ハックすることができます。

于 2013-01-22T00:31:00.900 に答える