1

HTML、CSS、PHP で Web サイトを作成しています。ページの上部にナビゲーションがあり、マウスをボタンの上に置くと点灯します。

ここで、ボタンをクリックしてその特定のページに移動すると、そのページのボタンが点灯して、そのページにいることを示したいと思います。どうすればこれを行うことができますか？各ページで変数を定義してからメニューで確認することはできません。サイトにもフォーラムがあり、各ページで変数を定義する必要があるからです。

編集

私は自分の問題を解決することができました。結局のところ、ページを定義するだけで済み、フォーラムについても、フォーラムが使用する設定ファイルで同じことを行うことができました。

私のナビゲーションでは、現在のページが何であるかを確認するだけです:

<li id="news"><a <? if(PAGE == "INDEX") print 'class="active"'; ?> href="/">News</a></li>
4

2 に答える 2

0

body次のように、クラス（またはID）をタグに追加します。

<body class="Page1">...</body>

次に、CSSで次のように言うことができます。

.Page1 menu li, menu li:hover {...}
于 2012-06-28T13:03:24.100 に答える
0

PHP で現在のページを確認する方法がわかりませんが、それが理想的です。

ただし、JavaScript に依存したい場合は、過去にこの関数を使用して成功しました。

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);
        }
    }
}

そして、ページの読み込み時に関数を読み込むには:

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

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

これは、ナビゲーションの ID が「navigation」であることを前提としていますが、必要に応じて変更できます。この関数は、現在のナビゲーション項目に "here" のクラスを追加するだけです。

このスクリプトは、Jeremy Keith の「DOM Scripting」から来ています。

于 2012-06-28T13:05:36.533 に答える