0

現在のリンクのcssは、誰かがABOUT USページに移動した後、私たちについて色が赤に変わったときのようになります。次に、CONTACT USページに移動し、私たちについて色がデフォルトに変わり、CONTACTUS色が赤に変わります。

私が新しいデザイナーになるのを手伝ってください......

4

4 に答える 4

0

ちょうどCSSを使用して、ユーザーが現在どのページであるかを判別することはできません-それは単にそれを行いません。CSSが使用できるある種のフックを追加するには、マークアップを調整する必要があります。そのようです -

<ul id="nav">
   <li><a href="about.html" class="here">About Us</a></li>
   <li><a href="contact.html">Contact</a></li>
</ul>

静的HTMLサイトを構築している場合は、メニューの現在のページを反映するように、各ページのHTMLを手動で変更できます。

より複雑なものを構築している場合は、現在のページを把握するためにPHPまたはJavaScriptに依存する必要があります。このスクリプトは少し古いですが（Jeremy Keithの「DOMScripting」からのものです）、次のように機能します。

function highlightPage(id){
    //make sure DOM methods are understood
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById) return false;
    if(!document.getElementById(id)) return false;
    var nav = document.getElementById(id);
    var links = nav.getElementsByTagName('a');
    for (var i=0; i < links.length; i++){
        var linkurl = links[i].getAttribute('href');
        var currenturl = window.location.href;
        //indexOf will return -1 on non-matches, so we're checking for a positive match
        if (currenturl.indexOf(linkurl) != -1) {
            links[i].className = "here";
            var linktext = links[i].lastChild.nodeValue.toLowerCase();
            document.body.setAttribute("id",linktext);
        }
    }
}

addLoadEvent(function(){
    highlightPage('nav');
    });

function addLoadEvent(func){
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

このスクリプトは、外部にリンクされたjavascriptファイルに入れられます。

于 2012-04-11T12:30:45.173 に答える
0

特定のメニューをクリックすると、その特定のページが開きます。あとは簡単なことをして、

アクティブのクラスを記述します。

これをホームページに適用

About Us ページの active class 属性から About Us li へ

<ul>
   <li class="active">Home</li>
   <li>Projects</li>
   <li>About Us</li>
</ul>
于 2012-04-11T12:24:32.110 に答える
0

css で :hover を使用

例の li を、実際のコードで使用する要素に置き換えます

例えば。

li:hover{backgroundcolor:Red;}

あなたがメニューをデザインする場合のliタグ

<ul>
   <li> Menu1</li>
   <li> Menu2</li>
</ul>
于 2012-04-11T12:03:54.193 に答える
0

ボディに ID name を付け<body id="about-us">ます。リンクにも ID が必要<a href="#" id='this-link">です。それで： 

#about-us #this-link {
color:red;
}  
#contact-us #this-link {
}
于 2012-04-11T12:43:16.420 に答える